Put Border Color React Material Theme

Question

How do you put material color theme in border like this code below

border: '2px solid (theme.palette.primary.main)',

Answer 1

You need to use template literals .

 border: `2px solid ${theme.palette.primary.main}`

How to access the theme object depends on the rest of your code. In a function component this could look like this:

const useStyles = makeStyles(theme => ({
  /// your style declarations
})

Please refer to the documentation for other examples.

Answer 2

You can use the already defined theme in your component with useTheme :

import React from "react";
import { useTheme } from '@material-ui/core/styles';

export default function YourComponent() {
  const theme = useTheme();

  return (
      <div style={{
        width: '200px',
        background: '#D3D3D3',
        height: '200px',
        border: `2px solid ${theme.palette.primary.main}`,
      }}>Div with themed border color</div>
  );
}

Find it working here: https://codesandbox.io/s/laughing-rain-5iwbq