One of the challenges I'm facing is styling a Grid element with a custom CSS class called addPanel using makeStyles in React. The issue arises when Material-UI automatically assigns its own classes to the rendered HTML, conflicting with my custom styles. Specifically, Material-UI adds a class like
.MuiGrid-spacing-xs-3 > .MuiGrid-itemTo address this problem and ensure my custom styles take precedence, I've been exploring ways to increase the CSS selector specificity by utilizing 2 or 3-class selectors on my
Grid.Below is a simplified version of the code snippet showcasing the challenge:
import React from 'react';
import {makeStyles} from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import TextField from '@material-ui/core/TextField';
const useStyles = makeStyles((theme) => ({
addPanel: {
paddingTop: "44px",
paddingLeft: "50px",
},
}));
const ManageLocales = (props) => {
const classes = useStyles();
return (
<Grid container spacing={3}>
<Grid item container xs={8} spacing={3} className={classes.addPanel}>
<Grid item>
<TextField
label="Add country"
variant="outlined"
size="small"
/>
</Grid>
</Grid>
</Grid>
);
}
export default ManageLocales;