@mui/private-theming

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

styled-components

styled-components is a popular library for styling React applications using tagged template literals. It allows you to create theme objects and use them to style components, similar to @mui/private-theming. However, styled-components is more focused on CSS-in-JS and provides a different approach to theming compared to Material-UI's theming system.

emotion

Emotion is another library for writing CSS styles with JavaScript. It provides powerful and flexible theming capabilities, allowing you to create and manage themes and apply them to your components. Emotion is similar to @mui/private-theming in terms of theming functionality but offers a broader range of styling options and integrations.

theme-ui

theme-ui is a library for building consistent, themeable React applications. It provides a theming system that is similar to @mui/private-theming, allowing you to define and apply themes to your components. theme-ui is designed to work seamlessly with the Styled System and offers a more opinionated approach to theming compared to Material-UI.

README

@mui/private-theming

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

Changelog

6.0.0-alpha.5

<!-- generated comparing v6.0.0-alpha.4..next -->

May 1, 2024

A big thanks to the 9 contributors who made this release possible.