@mui/styled-engine

What is @mui/styled-engine?

The @mui/styled-engine package is a styling solution for MUI, a popular React UI framework. It acts as an abstraction layer over different styling solutions, allowing developers to switch between different styled engines, such as emotion or styled-components, without changing their MUI component usage. It provides a consistent API for defining styles for MUI components.

What are @mui/styled-engine's main functionalities?

Customization of MUI components

This feature allows developers to customize MUI components using a familiar CSS-in-JS syntax. The code sample demonstrates how to create a custom styled version of an MUI Button component with a specific background color and hover state.

{"const StyledButton = styled(Button)({ backgroundColor: 'lightblue', '&:hover': { backgroundColor: 'blue' } }); return <StyledButton>Styled Button</StyledButton>;"}

Theming support

The package provides theming support, enabling developers to define a theme object and apply it to MUI components using a ThemeProvider. The code sample shows how to define a custom theme with a primary color and apply it to a Button component.

{"const theme = createTheme({ palette: { primary: { main: '#007bff' } } }); return <ThemeProvider theme={theme}><Button color='primary'>Themed Button</Button></ThemeProvider>;"}

Style overrides

Developers can use the package to override default styles of MUI components at the theme level. The code sample illustrates how to override the font size of all Button components within a theme.

{"const theme = createTheme({ components: { MuiButton: { styleOverrides: { root: { fontSize: '1rem' } } } } }); return <ThemeProvider theme={theme}><Button>Button with Style Overrides</Button></ThemeProvider>;"}

Other packages similar to @mui/styled-engine

styled-components

Styled-components is a popular CSS-in-JS library that allows you to write actual CSS code to style your components. It uses tagged template literals to style components and does not rely on a theme provider like @mui/styled-engine. It is similar in providing a way to style components but does not have built-in integration with MUI.

emotion

Emotion is another CSS-in-JS library that enables styling with a JavaScript and CSS syntax. It is similar to @mui/styled-engine in that it can be used with MUI components, and in fact, @mui/styled-engine can use Emotion as its underlying implementation. Emotion provides more flexibility and customization options compared to the abstraction provided by @mui/styled-engine.

jss

JSS (JavaScript Style Sheets) is a styling library that allows you to write CSS in JavaScript. It is similar to @mui/styled-engine in that it can be used to style React components, but it uses a different syntax and approach. JSS was the default styling solution in older versions of MUI before the introduction of the styled-engine abstraction.

README

@mui/styled-engine

This package is a wrapper around the @emotion/react package. It also provides a shared interface that can be used with other styled engines, like styled-components. It is used internally in the @mui/system package.

Documentation

Visit https://v5.mui.com/material-ui/integrations/styled-components/ to view the full documentation.