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 de @mui/material/styles para definir el tema y ThemeProvider para aplicar ese tema. Y en lugar de usar consultas de medios simples, use puntos de interrupción de tema , pero tendrá que especificar los valores de píxel para estos puntos de interrupción usted mismo si no está usando los predeterminados. También se puede hacer usando temas. 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 con ThemeProvider import 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> ); }Aquí hay una demostración de trabajo