2

试图弄清楚如何使用 Emotion 中的样式覆盖选项卡指示器的样式。我不确定如何访问嵌套类。这就是我所拥有的，但它并没有让我到达那里：

const StyledTabs = styled(Tabs)(
  {
    classes: {
      indicator: {
        background: 'black',
      },
    },
  }
);

任何帮助都是极好的！

4

1 回答 1

1

有几个问题。styledfrom Emotion 仅支持每次使用生成单个类名。它不为classes: {indicator: {styles}}您的示例中的结构提供任何支持。

下面是一个语法，它允许您styled为“指标”类提供类名Tabs：

const StyledTabs = styled(({ className, ...other }) => {
  return <Tabs {...other} classes={{ indicator: className }} />;
})({
  backgroundColor: "black"
});

但是，这并不能完全可靠地工作，因为<style>Emotion 样式的元素不会始终出现在文档<style>中 JSS（用于 Material-UI 的样式）的元素之后<head>。我不确定如何更改 Emotion 样式的插入点，但您可以在此处阅读有关如何更改 JSS 的插入点的信息。我在下面的沙箱中包含了这种方法。

这是一个显示此工作的沙箱：

编辑标签指示情绪

另一种语法选项如下，它允许您控制多个 Tabs 类：

const StyledTabs = styled(({ className, ...other }) => {
  return <Tabs {...other} classes={{ root: className, flexContainer: "flexContainer", indicator: "indicator" }} />;
})({
  "& .indicator": {
    background: "black"
  },
  "& .flexContainer": {
    flexDirection: "row-reverse"
  }
});

编辑标签指示情绪

于 2019-03-16T14:40:32.387 回答