MUI의 CSS 자 선택기

MUI의 CSS 자 선택기

CSS에 이것과 동등한 MUI를 사용하여 스타일을 작성하려고 합니다.

.deleted td {
    background: red
}

하지만 MUI의 CSS에서 JS 방식으로 어떻게 해야 하는지 잘 모르겠습니다.

현재 가지고 있는 관련 토막은 다음과 같습니다.

const styles = theme => ({
    deleted: {
        background: '#eee'
    }
})

<TableRow className={classes.deleted}>
    <TableCell></TableCell>
</TableRow>

다음과 같은 스타일을 생성해야 합니다.

.deleted td {
    background: red
}

@josh의 조언에 따라&

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

모든 아이를 선택할 경우 다음과 같이 "&> *"를 사용할 수 있습니다.

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

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

만약 누군가가 보고 있다면, 데이터 속성을 가진 아이를 선택하는 방법은 다음과 같습니다.

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

웹킷 차일드 셀렉터 스타일링 방법을 찾고 있었습니다.

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

  }
}

다른 사람의 시간을 절약하기 위해 떠나는 것!

언급URL : https://stackoverflow.com/questions/54073151/css-child-selector-in-mui