如何为选择器使用MUI样式的组件？
如何为选择器使用MUI样式的组件？
提问于 2022-08-04 02:32:35
在这里，我试图将我在CSS文件中编写的样式转换为MUI样式的组件。但我在这方面面临着挑战
CSS
.depth-0 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-1 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-1:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}
.depth-1 + .depth-2 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}
.depth-2 + .depth-3 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-2 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}MUI风格的
const StyledContainer = styled('div')(() => ({
'& .depth-0 + & .depth-1': {
backgroundColor: 'pink !important'
}
}))以上代码不起作用。请指导我如何在MUI中隐藏上面的CSS代码？
只是为了尝试，我在MUI样式中添加了backgroundColor。
下面是那个- https://codesandbox.io/s/tanstack-table-expansion-pagination-9nuzit?file=/src/App.js的工作演示链接
回答 2
Stack Overflow用户
发布于 2022-08-04 04:52:39
您应该创建样式化的组件，其css设置为
export const StyledContainer = styled.div`
.depth-0 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-1 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-1:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}
.depth-1 + .depth-2 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-2:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}
.depth-2 + .depth-3 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-2 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-1 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3 + .depth-0 {
box-shadow: inset 0px 3px 3px -3px rgba(50, 50, 50, 0.75);
}
.depth-3:last-child {
box-shadow: inset 0px -3px 3px -3px rgb(50 50 50 / 75%);
}
///other css setting here that will apply on StyledContainer component.
`;您可以使用组件作为，
……
Stack Overflow用户
发布于 2022-08-04 08:42:43
试着在行前面加上单变量&，
const StyledContainer = styled('div')(() => ({
'& .depth-0 + .depth-1': {
backgroundColor: 'pink !important'
}
}))另外，对于最后一个和第一个孩子的选择器，使用类型的第一类型和最后的类型。
const StyledContainer = styled('div')(() => ({
'& .depth-2:last-of-type': {
backgroundColor: 'pink !important'
},
'& .depth-0:first-of-type': {
backgroundColor: 'pink !important'
}
}))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73229755
复制相关文章
相似问题
腾讯云开发者
