xxxxxxxxxx
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
root: {
background: 'blue',
color: 'white',
padding: theme.spacing(2),
},
}));
function MyComponent() {
const classes = useStyles();
return (
<div className={classes.root}>
This is a styled component using makeStyles in Material-UI v5.
</div>
);
}
xxxxxxxxxx
import { makeStyles } from "tss-react/mui";
import { Typography, Container, Button } from "@mui/material";
const useStyles = makeStyles()(() => {
return {
root: {
color: "green",
},
};
});
const Create = () => {
const { classes } = useStyles();
return (
<div>
<Button variant="text" className={classes.root}>
Text
</Button>
</div>
)
}
xxxxxxxxxx
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
}));
xxxxxxxxxx
{
"compilerOpti`enter code here`ons": {
"lib": ["es6", "dom"],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true
}
}
xxxxxxxxxx
const theme = createTheme({
typography: {
tab: {
fontSize: 20,
},
},
palette: {
common: {
purple: 'purple',
},
},
})