Question

在此处查看此问题： How change active tab color in React material-ui?

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

他们给出的答案有效：

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

但我也想将inkBarStyle更改为黑色和更厚。这是Material-UI选项卡文档，我找到了inkBarStyle选项卡属性：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）设置活动指示器的颜色和厚度。 here可用的文档。

以下是使用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：“”}更改活动指示器的颜色

指示器：{height：“”}更改活动指示器的厚度

指示器：{top：“”}将活动指示器从包装器的顶部放置

tabsWrapper：{height：“”}更改<Tabs/>的高度。如果指示器太厚直到它不在外面，则必须更改此值。

tabsWrapper：{backgroundColor：“”}更改<Tabs/>的backgroundColor

您还可以查看我的sandbox here，以获取更多参考。希望这会有所帮助！

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

2 个答案: