CSS child selector in MUI

Question

Trying to write a style with MUI equivalent to this in CSS

.deleted td {     background: red } 

But not sure how to do it in MUI's CSS in JS way.

Here are the relevant snippets I have currently

const styles = theme => ({     deleted: {         background: '#eee'     } })  <TableRow className={classes.deleted}>     <TableCell></TableCell> </TableRow> 

It should generate a style similar to:

.deleted td {     background: red } 

Answer 1

As advised from @josh, using &

  deleted: {     "& td": {       background: "red"     }   } 

https://codesandbox.io/s/llmq5or1w7

import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import Table from "@material-ui/core/Table"; import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import Paper from "@material-ui/core/Paper";  const styles = theme => ({   root: {     width: "100%",     marginTop: theme.spacing.unit * 3,     overflowX: "auto"   },   table: {     minWidth: 700   },   deleted: {     "& td": {       background: "red"     }   } });  let id = 0; function createData(name, calories, fat, carbs, protein) {   id += 1;   return { id, name, calories, fat, carbs, protein }; }  const rows = [   createData("Frozen yoghurt", 159, 6.0, 24, 4.0),   createData("Ice cream sandwich", 237, 9.0, 37, 4.3),   createData("Eclair", 262, 16.0, 24, 6.0),   createData("Cupcake", 305, 3.7, 67, 4.3),   createData("Gingerbread", 356, 16.0, 49, 3.9) ];  function SimpleTable(props) {   const { classes } = props;    return (     <Paper className={classes.root}>       <Table className={classes.table}>         <TableHead>           <TableRow>             <TableCell>Dessert (100g serving)</TableCell>             <TableCell align="right">Calories</TableCell>             <TableCell align="right">Fat (g)</TableCell>             <TableCell align="right">Carbs (g)</TableCell>             <TableCell align="right">Protein (g)</TableCell>           </TableRow>         </TableHead>         <TableBody>           {rows.map(row => {             return (               <TableRow key={row.id} className={classes.deleted}>                 <TableCell component="th" scope="row">                   {row.name}                 </TableCell>                 <TableCell align="right">{row.calories}</TableCell>                 <TableCell align="right">{row.fat}</TableCell>                 <TableCell align="right">{row.carbs}</TableCell>                 <TableCell align="right">{row.protein}</TableCell>               </TableRow>             );           })}         </TableBody>       </Table>     </Paper>   ); }  SimpleTable.propTypes = {   classes: PropTypes.object.isRequired };  export default withStyles(styles)(SimpleTable); 

Answer 2

if you wanted to choose all the children you can use : "& > *" like:

    root: {        "& > *": {        ...        }     },     ...        },