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);

Будем весьма признательны за любые указания / объяснения по этому поводу.

Answer 1

Для вкладок Material-UI, индикаторColor имеет значение enum: 'secondary' | 'primary', но вы можете переопределить с помощью classes или с TabIndicatorProps.См. API вкладок и демо Customized Tabs , или mui-org / material-ui / # 11085 для дальнейшего обсуждения этой темы.

Вот ваш пример переопределения indicator с classes для белого подчеркивающего цвета и показа, как отключить пульсации (обратите внимание на другой синтаксис withStyles import):

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);

Answer 2

В REACT вы должны использовать className, а не классы.

см. Это: https://reactjs.org/docs/faq-styling.html

Вы также можете посмотреть, как они это делают на сайте Material-UI:

https://material -ui.com / demos / tabs /

Кроме того, при стилизации вы можете не получить никаких ошибок, и стилизация просто не будет применена.Поэтому иногда сложно найти и устранить неисправность.