If you want to apply two classes in Material UI, here's how you can do it:
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
container: {
display: 'flex',
flexWrap: 'wrap',
},
spacious: {
padding: 10,
},
});
Here is an example code snippet:
<div className={classNames(classes.container, classes.spacious)}>
Try this one!
</div>
To add two classes using the comparison operator in Material UI, follow these steps:
If you need to define one or two classes using the comparison operator, use the following code:
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
maineButton: {
borderRadius: "10px",
minWidth: "80px",
border: "1x solid #dcdcdc",
},
selectedButton: {
border: "1x solid #3f51b5",
},
});
Below is a sample code snippet that demonstrates how to achieve this:
const [selected, setSelected] = useState(0);
You can use the following code to set two classes if the condition is met:
{data?.map((el, index) => (
<ButtonBase
className={classNames(
classes.maineButton,
index === selected && classes.selectedButton
)}
onClick{()=> setSelected(index)}
>
{el.text}
</ButtonBase>
))}
If the condition is not met, only one class will be applied:
className={classNames(classes.maineButton)}