MUI 中的 CSS 子选择器

Posted 2023-02-22

【中文标题】MUI 中的 CSS 子选择器

【英文标题】：CSS child selector in MUI

【发布时间】：2019-06-02 01:04:38

【问题描述】：

尝试在 CSS 中使用与此等效的 MUI 编写样式

.deleted td 
    background: red

但不确定如何以 MUI 的 CSS in JS 方式进行操作。

这是我目前拥有的相关sn-ps

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

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

它应该生成类似于：

.deleted td 
    background: red

【问题讨论】：

这行得通还是你有什么问题？如果您遇到问题，当前的行为是什么？此外，共享一个重现您的问题的 CodeSandbox 或类似的东西将使其他人更容易确定您是否遗漏了任何其他相关方面，并更容易验证任何潜在的解决方案（但最好包括最相关的部分直接在问题中，就像您在此处所做的那样）。

你试过删除吗： "& td": background: "red"

&是什么意思？

【参考方案1】：

根据@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);

【讨论】：

您可以通过&& td 获取孙子。我假设你可以无限期地链接&。

如果不是td，我想定位一个使用material ui 创建的类怎么办？喜欢& .deleted

【参考方案2】：

如果您想选择所有可以使用的孩子：“& > *” 喜欢：

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

【参考方案3】：

以防万一有人在看，这里是你如何选择具有数据属性的孩子：

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

【参考方案4】：

我正在寻找一种方法来设置 webkit 子选择器的样式。

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

  

离开希望能节省别人的时间！

【参考方案5】：

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