How do I access the colors of the theme through using sx?
I tried below but it doesn't work.
<Card
sx={{
border: "2px solid primary.main",
}}
>
How to Access Theme Colors Through SX in Material UI
Viewed 891
2 Answers
As an alternative, you should be able to do:
<Card sx={{border: "2px solid", borderColor: "primary.main"}}>
The shorthand "border" doesn't seem to access the theme colors properly. Hope that's helpful.
Update: Just wanted to add to this that you could also use a function value to set the border color according to your theme.
<Card sx={{border: "2px solid", borderColor: (theme) => theme.palette.primary.main}}>
The useTheme() hook will help:
export default function App() {
const theme = useTheme()
return <Card sx={{ border: `2px solid ${theme.palette.primary.main}` }}>...
}
Related