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

问题描述 投票：1回答：1

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

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

任何帮助都是极好的！

javascript css material-ui emotion css-in-js
1个回答
1
投票

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

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

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

但是，这并不完全有效，因为在文档的<style>中，JSS（用于Material-UI的样式）的<style>元素后，Emotion样式的<head>元素不会始终出现。我不确定如何改变Emotion样式的插入点，但是你可以阅读here关于如何更改JSS的插入点。我在下面的沙盒中包含了这种方法。

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

Edit Tabs indicator emotion

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

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

Edit Tabs indicator emotion

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.