在 Mui 中，如何在我的 CSS 中使用主题值

Question

My React app is using mui themes; index.js contains:

let theme = createTheme({
  palette: {
    primary: {
      main: "#00aaa0",
      contrastText: '#fcf4d9',
    },
    secondary: {
      main: "#D55B3E",
      contrastText: '#fcf4d9',
    },
  },
});

theme = responsiveFontSizes(theme);

ReactDOM.render(
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  document.getElementById('root')
);

In one of my components (footer) I want to be able to add a top border which is in the primary colour. So far footer.tsx contains:

const Footer= () => {

  return (
    <div className="pageFooter">Footer Text</div>
  );
};

export default Footer;

I want to style "pageFooter" so that it uses theme.palette.primary.main as a top border colour. With regular css I would link in my css file containing:

.pageFooter {
  border-top: 2px solid "#00aaa0";
}

but I want to make sure that the colour is always the same as the primary colour, so I want to do something like this:

.pageFooter {
  border-top: 2px solid theme.palette.primary.main;
}

This doesn't work, though, presumably because the theme is not available to the css file. I've read the docs and I can't really follow them. Can anyone explain what I should be doing here?

Answer 1

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles(theme => ({ 
   pageFooter: {
     borderColor: theme.palette.primary.main,
   }
});

const Footer= () => {
    const classes = useStyles()

  return (
    <div className={classes.pageFooter}>Footer Text</div>
  );
};

export default Footer;

Answer 2

according to the MUI docs:

@mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5.

and also

@mui/styles is not compatible with React.StrictMode or React 18.

MUI use JSS for styling. so we don't have access to theme in CSS files. my solution: you can define a CSS variable same color as your theme palette color. then use it in CSS files.

:root {
    --primary-main: #00aaa0;
  }
.pageFooter {
  border-top: 2px solid var(--primary-main);
}

Answer 3

It's supported now by MUI v5.6.0 as an experimental feature. They export theme variables as CSS variables. Read the docs .

Example:

/* external-scope.css */
.external-section {
  background-color: var(--mui-palette-grey-50);
}