CSS child selector in Material UI

Question

Trying to write a style with Material UI equivalent to this in CSS

.deleted td {
    background: red
}

But not sure how to do it in Material UI'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
}

Immediacy

Does this work or are you having some problem? If you are having a problem, what is the current behavior? Also, sharing a CodeSandbox or similar that reproduces your problem will make it easier for others to determine whether or not there are any other relevant aspects that you missed and make it easier to verify any potential solutions (but it is good to include the most relevant portions directly in the question as you did here). – Forwarder

Have you tried deleted: { "& td": { background: "red" } } – Auditorium

What is the meaning of &? – Hosmer

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);

Immediacy

You can do && td to get the grandchild. I assume you can keep chaining &'s indefinitely. – Jink

what if instead of td I wanted to target a class created with material ui? Like & .deleted – Peroxide

Answer 2

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

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

Piddle

Answer 3

import { Box, styled } from "@mui/material";

const StyledBox = styled(Box)({
  // root selector (.MuiBox-root)
  background: "red",

  "&": {
    // '&' points to the root selector which is the same as the above (.MuiBox-root)
    background: "red"
  },
  "&&": {
    // also a root selector but with higher CSS specificity (.MuiBox-root.MuiBox-root)
    background: "red"
  },
  "& .ChildSelector": {
    // child selector (.MuiBox-root .ChildSelector)
    background: "orange",

    // this '&' points to the current selector which is '.MuiBox-root .ChildSelector'
    "& .NestedChildSelector": {
      // nested child selector (.MuiBox-root .ChildSelector .NestedChildSelector) (#1)
      background: "yellow"
    }
  },
  "& .ChildSelector .NestedChildSelector": {
    // same as (#1) (.MuiBox-root .ChildSelector .NestedChildSelector)
    background: "yellow"
  },
});

Caxton

Answer 4

Just in case if somebody's looking, here's how you select children with the data attribute:

    ...
    root: {
    "& span[data-index='0']": {
        transform: 'translateX(-15%)',
    },
    "& span[data-index='3']": {
        ...
    }
   },
   ...

Leatrice

Answer 5

I was searching for a way to style a webkit child selector.

audioPlayer: {
  "&::-webkit-media-controls-play-button": {

  }
}

Leaving to hopefully save someone else the time!

Mckinnie

Answer 6

using @mui v5

you can select child element inside sx API, for example:

<Box
   sx={{
        display: { xs: 'block', sm: 'none' },
        '& img': {  width: 50 },
   }}
>
  <img />
</Box>

Jermainejerman