如何在 React Material-UI 中更改活动标签 inkBarStyle 颜色和粗细？答案

【问题标题】：How to change active tab inkBarStyle color and thickness in React Material-UI?如何在 React Material-UI 中更改活动标签 inkBarStyle 颜色和粗细？
【发布时间】：2018-10-28 07:02:51
【问题描述】：

在此处查看此问题： 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。远远超出我的联盟......

【问题讨论】：

请解释反对意见。

标签： javascript reactjs user-interface material-ui

【解决方案1】：

如果您检查 ink 元素，您会发现它的厚度由 height 定义。

因此，除了 background 之外，您还需要传递您想要的 height 值......即

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

需要marginTop 值，以便墨水不会超出 Tab 元素。你可以在这里玩：

https://codesandbox.io/s/jpnr541543
Hello.js 组件有标签相关的代码。

【讨论】：

完美！谢谢！
另外，你能澄清一下你所说的“检查”是什么意思吗？通常在我的工作中，这意味着我要使用示波器、逻辑分析仪和万用表——甚至可能是频谱分析仪或显微镜，但绝不是浏览器。我认为您的意思是右键单击 Chrome 浏览器并转到“检查”？你看，我对这些东西太陌生了，我从来没有想过，因为我几乎不了解它是如何运作的。你帮了大忙。
当我检查它时，我看到 marginTop 被称为margin-top。你怎么知道你需要写 marginTop 代替？
@GabrielStaples 嘿，所以你对我提到的检查是正确的。通过单击检查（在右键菜单上），您可以打开开发工具，在那里您可以检查它们是如何设置组件样式的：css 属性等。
@GabrielStaples 关于 margin-top/marginTop 问题：反应样式以这种方式工作，它只是 css 属性的驼峰式版本。在此处阅读更多信息：reactjs.org/docs/dom-elements.html#style

【解决方案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;

indicator: {backgroundColor: ""} 改变活动指示器的颜色

indicator: {height: ""} 改变活动指标的粗细

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

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

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

您也可以查看我的sandbox here 以供进一步参考。希望这会有所帮助！

【讨论】：