Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mui/private-theming

Package Overview
Dependencies
Maintainers
11
Versions
119
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/private-theming

Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.

  • 6.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.8M
increased by11.04%
Maintainers
11
Weekly downloads
 
Created

What is @mui/private-theming?

@mui/private-theming is a package that provides theming capabilities for Material-UI components. It allows you to create and manage themes, and apply them to your components to ensure a consistent look and feel across your application.

What are @mui/private-theming's main functionalities?

Creating a Theme

This feature allows you to create a custom theme with specific color palettes. The `createTheme` function is used to define the primary and secondary colors for the theme.

const { createTheme } = require('@mui/private-theming');

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

console.log(theme);

Applying a Theme

This feature allows you to apply a theme to your application using the `ThemeProvider` component. By wrapping your app content with `ThemeProvider` and passing the theme object, you ensure that the theme is applied throughout your application.

const { ThemeProvider } = require('@mui/private-theming');
const React = require('react');
const ReactDOM = require('react-dom');

const App = () => (
  <ThemeProvider theme={theme}>
    <div>Your app content</div>
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Using Theme in Components

This feature allows you to use the theme within your components. The `useTheme` hook provides access to the theme object, which can then be used to style your components dynamically based on the theme settings.

const { useTheme } = require('@mui/private-theming');
const React = require('react');

const ThemedComponent = () => {
  const theme = useTheme();
  return (
    <div style={{ color: theme.palette.primary.main }}>
      This text is styled with the primary color of the theme.
    </div>
  );
};

Other packages similar to @mui/private-theming

Keywords

FAQs

Package last updated on 11 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc