javascript - React Material-UI - 样式标签

Question

我对反应很陌生，我已经在这几个小时了，没有太多运气。

我正在尝试设置标签的样式，以便下划线颜色为白色：

并删除 onClick 波纹：

我怀疑这与覆盖类有关：指标，但我不完全确定它是如何/为什么起作用的。

为了清楚起见，我附上了我的代码。

import React, {Component} from "react"
import AppBar from "@material-ui/core/AppBar/AppBar";

import Tabs from "@material-ui/core/Tabs/Tabs";
import Tab from "@material-ui/core/Tab/Tab";
import withStyles from "@material-ui/core/es/styles/withStyles";

const styles = {
    AppBar: {
        background: 'transparent',
        boxShadow: 'none'
    },
    Indicator:{
        ripple:{
          color: 'blue'
        },
        backgroundColor: 'white',
    }
};

class NavBar extends Component {
    render() {
        return (
            <AppBar style={styles.AppBar}>
               <Tabs classes={{ indicator: styles.Indicator}} centered value={0}>
                   <Tab label="Fairness"/>
                   <Tab label="Community" />
                   <Tab label="Referrals" />
                   <Tab label="How To Play" />
               </Tabs>
            </AppBar>
        )
    }
}

export default withStyles(styles)(NavBar);

对此的任何指导/解释将不胜感激。

标签： javascriptreactjsmaterial-ui

Answer 1

对于 Material-UI 选项卡，indicatorColor 是一个enum: 'secondary' | 'primary'，但您可以使用或覆盖它。有关此主题的进一步讨论，请参阅选项卡 API和自定义选项卡演示，或mui-org/material-ui/#11085。classesTabIndicatorProps

这是您的示例，它覆盖了白色下划线颜色的indicatorwithclasses并显示了如何禁用波纹（注意不同的withStyles导入语法）：

import React, { Component } from "react";
import AppBar from "@material-ui/core/AppBar/AppBar";

import Tabs from "@material-ui/core/Tabs/Tabs";
import Tab from "@material-ui/core/Tab/Tab";
import { withStyles } from "@material-ui/core/styles/";

const styles = theme => ({
  indicator: {
    backgroundColor: "white"
  }
});

class NavBar extends Component {
  render() {
    const { classes } = this.props;
    return (
      <AppBar style={styles.AppBar}>
        <Tabs classes={{ indicator: classes.indicator }} centered value={0}>
          <Tab disableRipple label="Fairness" />
          <Tab disableRipple label="Community" />
          <Tab label="Referrals" />
          <Tab label="How To Play" />
        </Tabs>
      </AppBar>
    );
  }
}

export default withStyles(styles)(NavBar);