覆盖 Material UI 选项卡指示器情感样式

Question

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

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

任何帮助都会很棒！

Answer 1

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

下面的语法允许您使用 styled 为 Tabs 的 "indicator" class 提供 class 名称：

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

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

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

另一个语法选项如下，它允许您控制多个选项卡class:

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

覆盖 Material UI 选项卡指示器情感样式

Override Material UI Tab Indicator Emotion Styled

css

emotion

reactjs

material-ui

css-in-js