Menu
I am struggling to modify button colors in MUI next (v1).
How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ?
I tried with custom className but it doesn't work properly (hover color does't change) and it seems repetitive. What options do I have?
372
Try this: import * as React from 'react'; import Button, { ButtonProps } from "@material-ui/core/Button"; import { Theme } from '@material-ui/core'; import { withStyles } from '@material-ui/styles'; const styles: (theme: Theme) => any = (theme) => { return { root:{ backgroundColor: theme. palette. error.
According to the official Doc: Customize MUI with your theme, you need to use ThemeProvider and createTheme . First, customize the primary color like this, import {ThemeProvider, createTheme} from '@mui/material/styles'; const theme = createTheme({ palette: { primary: { main: '#000000', }, }, });
You can try this
<Button style={{ borderRadius: 35, backgroundColor: "#21b6ae", padding: "18px 36px", fontSize: "18px" }} variant="contained" > Submit </Button> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
