How to Access Theme Colors Through SX in Material UI

Question

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",
  }}
>

Answer 1

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

Answer 2

The useTheme() hook will help:

export default function App() {
  const theme = useTheme()
  return <Card sx={{ border: `2px solid ${theme.palette.primary.main}` }}>...
}