change primary color material ui code example
Example 1: material ui color background
// import Box from Material-UI
import Box from '@material-ui/core/Box';
// Use bgcolor to set background color in box
<Box bgcolor="primary.main" />
<Box bgcolor="secondary.main" />
<Box bgcolor="error.main" />
<Box bgcolor="warning.main" />
<Box bgcolor="info.main" />
<Box bgcolor="success.main" />
<Box bgcolor="text.primary" />
<Box bgcolor="text.secondary" />
<Box bgcolor="text.disabled" />
Example 2: change text color material ui
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
const WhiteTextTypography = withStyles({
root: {
color: "#FFFFFF"
}
})(Typography);
export default function App() {
return (
<div className="App" style={{ backgroundColor: "black" }}>
<WhiteTextTypography variant="h3">
This text should be white
</WhiteTextTypography>
</div>
);
}
Example 3: themein material ui
import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';
const theme = createMuiTheme({
palette: {
primary: purple,
secondary: green,
},
status: {
danger: 'orange',
},
});