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
}

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). — Ryan Cogswell, Jan 07 '19 at 15:10

score 83 · Answer 1 · answered Jan 08 '19 at 02:31

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

You can do `&& td` to get the grandchild. I assume you can keep chaining `&`'s indefinitely. — Remolten, Jan 21 '20 at 00:00
what if instead of `td` I wanted to target a class created with material ui? Like `& .deleted` — rotimi-best, Jan 26 '21 at 03:43

score 32 · Answer 2 · answered Sep 28 '20 at 15:34

32

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

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

answered Sep 28 '20 at 15:34

yasin moosavi

416
4
8

NearHuscarl · Answer 3 · 2021-10-21T16:54:45.610

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"
  },
});

score 17 · Answer 4 · answered May 19 '20 at 15:08

17

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']": {
        ...
    }
   },
   ...

answered May 19 '20 at 15:08

Erik Rybalkin

1,143
12
21

score 5 · Answer 5 · answered Feb 24 '21 at 15:57

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!

answered Feb 24 '21 at 15:57

gwalshington

1,418
2
30
60

score 2 · Answer 6 · answered Apr 10 '23 at 22:18

2

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>

answered Apr 10 '23 at 22:18

Ericgit

6,089
2
42
53

CSS child selector in Material UI

6 Answers6

using @mui v5

Linked

Related