@mui/styles

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>;
}