@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://next.mui.com/material-ui/integrations/styled-components/ to view the full documentation.

Changelog

6.0.0-beta.0

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

Jul 11, 2024

A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

• 🎉 This is the first v6 beta release! A huge thanks to everyone who helped to make this happen! The target date for a stable release is the 28th of July. The next month will be used to polish v6, and ease the migration from v5. You can follow the v6 stable milestone for more details.
• 🚀 All planned breaking changes are completed.