@mui/styles

What is @mui/styles?

@mui/styles is a styling solution for React applications that is part of the Material-UI library. It provides a set of utilities to help you style your components using JavaScript, allowing for dynamic and theme-based styling.

What are @mui/styles's main functionalities?

CSS-in-JS

This feature allows you to define styles using JavaScript objects. The `makeStyles` function generates a hook that you can use to apply these styles to your components.

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

function MyComponent() {
  const classes = useStyles();
  return <button className={classes.root}>Styled Button</button>;
}

Theming

Theming allows you to define a theme object that can be used to provide consistent styling across your application. The `ThemeProvider` component makes the theme available to all components within its subtree.

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

function ThemedComponent() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary Button</Button>
      <Button color="secondary">Secondary Button</Button>
    </ThemeProvider>
  );
}

Styled Components

Styled Components allow you to create custom-styled components using the `styled` function. This approach provides a more component-centric way of applying styles.

const MyButton = styled('button')({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

function MyComponent() {
  return <MyButton>Styled Button</MyButton>;
}

Other packages similar to @mui/styles

styled-components

Styled-components is a popular library for styling React applications using tagged template literals. It allows you to write plain CSS in your JavaScript and provides a way to create component-level styles. Compared to @mui/styles, styled-components offers a more flexible and modern approach to styling with a focus on component-based design.

emotion

Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API similar to styled-components and a css function for writing styles. Emotion is known for its high performance and flexibility, making it a strong alternative to @mui/styles for dynamic and theme-based styling.

aphrodite

Aphrodite is a lightweight CSS-in-JS library developed by Khan Academy. It focuses on performance and ease of use, providing a straightforward API for defining and applying styles. While it may not offer as many features as @mui/styles, it is a good choice for projects that require a simple and efficient styling solution.

README

@mui/styles

You can leverage our styling solution, even if you are not using our components.

Installation

Install the package in your project directory with:

npm install @mui/styles@next

Documentation

Visit https://mui.com/system/styles/basics/ to view the full documentation.