How to set Primary light colors to Button in MUI?

user_7734785 0
Viewed 2473

I am new to material UI and react js, I just tried to add 2 buttons, one is with primary color, and another with Primary-light. How can I do that

I am using emotion library. This is what I tried it. I am not trying to change of the default color of primary-light, I wants to use the default primary-light color to my button

<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>

the above 2 buttons are working as expected.

<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.

How to do this?

emotion material-design material-ui reactjs
2 Answers

"primary-light" is not one of the supported colours by MUI buttons. Which you can see in the documentation here here

You have a few options:

  • Manually override the style of this button. (not ideal).
  • Make a class that specifies the colour you want and provide the hex colour code as the background colour. (also not ideal).
  • Make a JSX class using makeStyles that takes the app's theme as an argument and provide the primary.light colour directly from your theme. (I'm not sure if this is outdated in version 5 of material UI but it is how you would usually do it in v4).

In your case it's probably easiest to take a quick look at the documentation Here Which shows how to customize colours on buttons using your theme and the styled function which is imported from mui/material/styles.

user_57701470

I had to create "primaryLight" color property in theme object so I could use. Also had to add types in order to Button can accept "primaryLight".

I used this document

user_129649960
Related