如何在 React Material-UI 中更改活动标签inkBarStyle颜色和厚度？

Question

在这里看到这个问题： How change active tab color in React material-ui?

这个答案在这里： https : //stackoverflow.com/a/37332913/4561887

他们给出的答案有效：

<Tabs inkBarStyle={{background: 'blue'}}>...

但我也想将inkBarStyle 更改为黑色和更厚。 这是我在其中找到了inkBarStyle Tabs 属性的Material-UI Tabs 文档： http : //www.material-ui.com/#/components/tabs 。

这是我尝试过的。 都失败了：

<Tabs inkBarStyle={{background: 'black'}, {background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', background-size: 100% 300%}}>
<Tabs inkBarStyle={{background: 'black', height: 100px}}>
etc.

另外，在哪里可以找到可以在此处设置的可能的inkBarStyle 选项列表，以及如何一次设置多个选项？ 我可以在这里使用任何 CSS 属性吗？ 例如：列表： http : //www.htmldog.com/references/css/properties/

请善待：我是一名嵌入式（微控制器）程序员，在这里试图修改 GUI。 远远超出我的联盟...

Answer 1

如果您检查该ink元素，您会看到它的厚度由它的height定义。

所以你需要通过除了background是你想要的height值.. 即

inkBarStyle={{ background: "#000", height: "5px", marginTop: "-5px" }}

需要使用marginTop值，这样墨水就不会超出 Tab 元素。 你可以在这里玩它：

https://codesandbox.io/s/jpnr541543
Hello.js 组件具有与选项卡相关的代码。

Answer 2

已弃用inkBarStyle 解决方案。

您现在可以使用 TabIndicatorProps 为当前版本的 MUI (4.10.02) 设置活动指示器颜色和厚度的样式。 文档可在此处获得。

以下是使用 className 的方法：{classes}

import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  indicator: {
    backgroundColor: "green",
    height: "10px",
    top: "45px"
  },
  tabsWrapper: {
    height: "60px",
    background: "lightgreen"
  }
}));

const TabsIndicator = () => {
  const classes = useStyles();

  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <React.Fragment>
        <Tabs
          value={value}
          onChange={handleChange}
          className={classes.tabsWrapper}
          TabIndicatorProps={{ className: classes.indicator }}
        >
          <Tab label="TEST1" value={0} />
          <Tab label="TEST2" value={1} />
          <Tab label="TEST3" value={2} />
          <Tab label="TEST4" value={3} />
        </Tabs>
    </React.Fragment>
  );
};

export default TabsIndicator;

指示器：{backgroundColor: ""} 更改活动指示器颜色

指标：{高度：“”} 改变活动指标的厚度

指示器：{top: ""} 将活动指示器从包装器的顶部定位

tabsWrapper: {height: ""} 改变了<Tabs/>的高度。 如果您的指标太厚，直到它在外面，则有必要更改此设置。

tabsWrapper: {backgroundColor: ""} 改变了<Tabs/>的 backgroundColor

您还可以在此处查看我的沙箱以获取进一步参考。 希望这可以帮助！