@mui/styled-engine-sc

What is @mui/styled-engine-sc?

@mui/styled-engine-sc is a styling solution for Material-UI that leverages styled-components. It allows you to create custom-styled components using the styled-components library while maintaining compatibility with Material-UI's theming and styling system.

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

Custom Styled Components

This feature allows you to create custom-styled components using the styled-components syntax. The example demonstrates how to style a Material-UI Button component with a gradient background, custom padding, and other CSS properties.

const MyButton = styled(Button)`
  background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3);
  color: white;
  height: 48px;
  padding: 0 30px;
`;

<MyButton>Styled Button</MyButton>;

Theming

This feature allows you to use Material-UI's theming capabilities with styled-components. The example shows how to create a custom theme and apply it to a styled component, utilizing theme properties like palette and spacing.

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

const MyComponent = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(2),
  borderRadius: theme.shape.borderRadius,
}));

<ThemeProvider theme={theme}>
  <MyComponent>Styled with Theme</MyComponent>
</ThemeProvider>;

Responsive Styles

This feature allows you to create responsive styles using media queries within styled-components. The example demonstrates how to change the background color of a div based on different screen widths.

const ResponsiveBox = styled('div')`
  width: 100%;
  height: 100px;
  background-color: lightblue;

  @media (min-width: 600px) {
    background-color: lightgreen;
  }

  @media (min-width: 960px) {
    background-color: lightcoral;
  }
`;

<ResponsiveBox>Responsive Box</ResponsiveBox>;

Other packages similar to @mui/styled-engine-sc

styled-components

styled-components is a popular library for styling React applications using tagged template literals. It provides a way to write CSS directly within JavaScript and supports theming, nesting, and more. Compared to @mui/styled-engine-sc, styled-components is more general-purpose and not specifically tied to Material-UI.

@emotion/styled

@emotion/styled is a library for writing CSS styles with JavaScript, similar to styled-components. It is part of the Emotion library, which offers a flexible and performant way to style applications. @emotion/styled is the default styling solution for Material-UI, whereas @mui/styled-engine-sc is an alternative that uses styled-components.

styled-jsx

styled-jsx is a library for scoped CSS in Next.js applications. It allows you to write CSS directly within your JavaScript and ensures that styles are scoped to the component. While styled-jsx is not specifically designed for Material-UI, it offers a similar approach to writing component-scoped styles.

README

@mui/styled-engine-sc

This package is a wrapper around the styled-components package implementing the interface of @mui/styled-engine. It's designed for developers who would like to use styled-components as the main styled engine instead of @emotion/styled.

Documentation

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