TableOne.css
@media (min-width:601px) and (max-width: 960px) {
.MuiTable-root .MuiTableBody-root{
display: flex !important;
justify-content: center !important ;
flex-wrap: wrap !important;
row-gap: 15px;
}
}
**above styles are applying to all the tables present in all my React components. But I want to apply for table that present in specific component. How I can write specific .css file for specific component**
@mui/material.createTheme from @mui/material/styles to define the theme and ThemeProvider to apply that theme. And instead of using plain media queries, use theme breakpoints instead but you will have to specify the pixel values for these breakpoints yourself if you're not using the default ones. It can be done using theming as well.import { createTheme } from "@mui/material/styles";
let theme = createTheme();
theme = createTheme(theme, {
components: {
MuiTableBody: {
styleOverrides: {
root: {
"@media (min-width: 601px) and (max-width: 960px)": {
// your styles here
},
[theme.breakpoints.between("md", "lg")]: {
// use this instead
}
}
}
}
}
});
export default theme;
Table component with ThemeProviderimport Table from "./components/Table";
import { ThemeProvider } from "@mui/material/styles";
import theme from "./theme/MuiTable"; // this is the theme you created above
...
const App = props => {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Table />
</ThemeProvider>
</div>
);
}
Here is a working demo