Question

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

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

任何帮助都会很棒！

Answer 1

有两个问题。 Emotion的styled仅支持每次使用生成一个类名。在您的示例中，它不支持classes: {indicator: {styles}}结构。

以下是一种语法，允许您使用styled为Tabs的“指标”类提供类名：

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

但是，由于E <style>元素在{{1}中来自JSS的<style>元素（用于Material-UI的样式）之后并没有一致地出现，因此无法完全鲁棒地工作。 }}。我不确定如何更改Emotion样式的插入点，但是您可以阅读here有关如何更改JSS的插入点。我已经在下面的沙箱中包含了这种方法。

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

以下是另一个语法选项，它将允许您控制多个Tabs类：

<head>

替代材质UI选项卡指示器的情绪样式

1 个答案: