Question

我正在尝试在Material UI中创建一个类特性，这与它们允许您使用伪类的方式相同，但是对于嵌套元素。例如，在Material UI Next（MUI-Next）中，我可以创建一个包含样式的类：

const styles = {
  appbar: {
     background: '#6d6146',
     '&:hover': {
        background: '#9e8e6a',
     },
  },
};

并以这种方式使用

<Toolbar className={classes.appbar}>
  ... blah blah blah
</Toolbar>

以彩色#6d6146绘制我的工具栏元素并将其悬停至#9e8e6a。

现在，如果想象我在工具栏中有一些元素，并且我不想为其中的每个元素创建一个类。（特别是如果它们不是MUI-Next元素，而是一些自定义HTML）为了一个例子，一个超链接。像这样：

<Toolbar className={classes.appbar}>
   <a href="www.google.com">
      <span>Title</span>
   </a>
</Toolbar>

是的，有很多方法可以使用MUI控件属性正确地执行此特定示例，请记住这是一个示例。真实世界的代码非常复杂，代码很多。

我想使用主父类作为钩子类以特殊方式访问该超链接。所需的渲染css看起来像这样：

.appbar {
    background: #6d6146;
}
.appbar:hover {
    background: #9e8e6a;
}
.appbar a{
    color: #d63302;
}

我创造特异性的尝试不起作用。这就是我试过的：

const styles = {
   appbar: {
      background: '#6d6146',
      '&:hover': {
          background: '#9e8e6a',
      },
      'a': {
        color: '#d63302',
      },
   },
};

根据MUI-Next如何处理伪类来创建特异性，这个元素特异性应该起作用，但不起作用。可以这样做，我没有使用正确的语法，或者这不受支持？

请记住，这是Material UI Next here。与旧的Material UI完全不同。

这是一个适合你的游乐场。提前谢谢。

SAMPLE CODE

Answer 1

试试这个：

appbar: {
    background: "#6d6146",
    "&:hover": {
      background: "#9e8e6a"
    },
    "& a": {
      color: "black",
      "&:hover": {
        color: "red"
      }
    }
  }

工作link

在Material UI中创建特异性Next和React

1 个答案: