score:3

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!

score:7

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

codesandbox demo

score:13

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

score:17

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

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

score:72

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

Related Query

More Query from same tag