In Mui, how do I use theme values in my css-CodePudding

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?

CodePudding user response：

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;