覆盖材质 UI 选项卡指示器情感样式答案

【问题标题】：Override Material UI Tab Indicator Emotion Styled覆盖材质 UI 选项卡指示器情感样式
【发布时间】：2019-03-15 21:55:29
【问题描述】：

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

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

任何帮助都会很棒！

【问题讨论】：

我从来没有处理过情感问题，但我认为问题在于您不能将{ background: 'black' } 作为对象样式传递给指示器，而是传递一个类名。你可以试试css`background: black;` 代替{ background: 'black' } 吗？

标签： css reactjs material-ui emotion css-in-js

【解决方案1】：

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

下面的语法允许您使用styled 为Tabs 的“指标”类提供类名：

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

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

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

另一种语法选项如下，可让您控制多个 Tabs 类：

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

【讨论】：

这很有帮助！很好的解释。谢谢！
我将如何向这个样式对象添加东西。比如flexContainer？
我已添加到我的答案中。此外，您可能想在这里插话：twitter.com/olivtassinari/status/1107618920545030144。 Olivier 正在向 styled-components 用户征求意见，但 Emotion/styled 也存在同样的困难。
在同一个文件中有多个应该不是问题。请分享一个显示问题示例的沙盒。
在文档中，注意“样式应用于根元素如果...”。这意味着该类不在后代元素上，而是在与根类相同的元素上，因此您需要使用"&.selected"（无空格）而不是"& .selected"。