Material ui 材质ui中的CSS子选择器

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

.deleted td {
    background: red
}

但不确定如何以material ui的方式进行

以下是我目前掌握的相关片段

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

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

---

按照@josh的建议，使用

&

  deleted: {
    "& td": {
      background: "red"
    }
  }

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
常量样式=主题=>({
根目录：{
宽度：“100%”，
marginTop:theme.space.unit*3，
overflowX：“自动”
},
表:{
最小宽度：700
},
删除：{
“&td”：{
背景：“红色”
}
}
});
设id=0；
函数createData（名称、卡路里、脂肪、碳水化合物、蛋白质）{
id+=1；
返回{id，name，carries，fat，carbs，protein}；
}
常量行=[
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（“Eclair”，262,16.0,24,6.0），
createData（“杯形蛋糕”，305,3.7,67,4.3），
createData（“姜饼”，356,16.0,49,3.9）
];
函数SimpleTable（props）{
常量{classes}=props；
返回(
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
{rows.map（row=>{
返回(
{row.name}
{row.carries}
{row.fat}
{row.carbs}
{row.protein}
);
})}
);
}
SimpleTable.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（SimpleTable）；

以防万一，如果有人在看，下面是使用数据属性选择子项的方法：

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

---

如果要选择所有可以使用的子项：&>*“ 比如：

---

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

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

  }
}

---

希望能为其他人节省时间

这有用吗？还是你有什么问题？如果您有问题，当前的行为是什么？此外，共享一个代码沙盒或类似的复制您的问题将使其他人更容易确定您是否遗漏了任何其他相关方面，并更容易验证任何潜在的解决方案（但最好像您在这里所做的那样将最相关的部分直接包含在问题中）。您是否尝试删除：{“&td”：{background:“red”}}您可以执行

&&td

来获取孙子。我假设您可以无限期地链接

&

。如果我不想使用

td

，而是想针对使用material ui创建的类，该怎么办？像

和.deleted

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

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

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

  }
}