代码之家 › 专栏 › 技术社区 › StuffedPoblano

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

css-in-js emotion material-ui css javascript

StuffedPoblano · 技术社区 · 7 年前

尝试找出如何使用来自情感的样式覆盖选项卡指示器的样式。我不知道如何访问嵌套类。这就是我所拥有的,但并不能让我达到目的:

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

任何帮助都会很棒的!

0 回复 | 直到 7 年前

Ryan Cogswell 7 年前

有几个问题。 styled from Emotion只支持每次使用生成一个类名。它不支持 classes: {indicator: {styles}} 你的例子中的结构。

下面的语法允许您使用 样式化 为的“indicator”类提供类名 Tabs :

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

但是,这并不完全可靠,因为 <style> 情绪类型的元素在 <样式> JSS中的元素(用于材质UI的样式) <head> 文件的。我不知道如何改变情感风格的插入点,但你可以阅读 here 关于如何更改JSS的插入点。我在下面的沙盒中包含了这种方法。

这是一个沙盒,显示了这一点:

另一个语法选项如下,允许您控制多个选项卡类:

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

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

2 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

2 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

2 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

2 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

2 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前