Question

想要从材料-ui标签更改活动标签上的背景颜色：

http://www.material-ui.com/#/components/tabs

已经如何更改下划线：

inkBarStyle = {{background：'red'}}

但背景颜色已更改

非常感谢

Answer 1

要自定义选项卡的背景颜色和inkBar的颜色，建议自定义Material-UI主题本身。这两种颜色有特定的设置。

const muiTheme = getMuiTheme({
    tabs: {
        backgroundColor: 'red'
    },
    inkBar: {
        backgroundColor: 'yellow'
    }
})

有关自定义主题的详细信息，请访问：http://www.material-ui.com/#/customization/themes

Answer 2

您可以简单地通过样式的条件渲染来做到，您的样式应如下所示

const styles = theme => ({

 default_tabStyle:{
 color: 'black',
 fontSize:11,
 backgroundColor: 'blue',
},

 active_tabStyle:{
 fontSize:11,
 color: 'white',
 backgroundColor: 'red',
}
})

然后在组件中

class YourComponent extends Component {

 state = {
   value: 0,
   }

   handleChange = (event, value, index) => {
    this.setState({ value:value });
  }

  render(){
    const { classes } = this.props;

   return (
    <div>
     <AppBar position="static"  className={classes.appBarStyle}>
        <Tabs value={this.state.value} indicatorColor="#E18F68" 
            onChange={this.handleChange}
            fullWidth={true}
            scrollButtons="auto"
            >
          <Tab label="Tab01"
          className=
            {this.state.value===0 ? classes.active_tab :classes.default_tabStyle} />

          <Tab label="Tab02" 
           className=
            {this.state.value===1 ?classes.active_tab :classes.default_tabStyle}/>

             <Tab label="Tab02" 
           className=
            {this.state.value===2 ?classes.active_tab :classes.default_tabStyle
           }/>

           </Tabs>
         </AppBar>
    </div>
   )
  }
 }

默认情况下，您的标签页的索引为0，并且更改时标签的索引将应用active_tabStyle。

Answer 3

总而言之，更新主题可能比更新选项卡的一个实例更好。这样，您就不必将样式添加到该特定组件的每次单独使用中。

通常，您会有一个主题文件，例如：

./ themes / default / index.ts

import { createMuiTheme } from '@material-ui/core/styles';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';

const overrides = {
  MuiTab: {
    // general overrides for your material tab component here
    root: {
      backgroundColor: 'red',
      '&$selected': {
        backgroundColor: 'blue',
      }
    },
  },
};

const theme = createMuiTheme( {
  overrides,
  breakpoints,
  palette,
  typography,
  shape,
});

然后在您的应用程序中，您可以将其用作：

./ src / index.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { App } from './components';

ReactDOM.render(
  <MuiThemeProvider theme={themeSpec.theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root') as HTMLElement
);

来源：https://material-ui.com/customization/components/#global-theme-override

可以在此处找到默认值：https://material-ui.com/customization/default-theme/

可以在以下位置找到组件的替代：https://github.com/mui-org/material-ui/blob/2726ab46b2b1789bdd0a9aa1a2ff249a443ab1a8/packages/material-ui/src/styles/overrides.d.ts#L91-L173

有关实体主题的更多信息：https://material-ui.com/customization/themes/#themes

注意：打字稿中的示例要更全面一些，但对于普通javascript来说也一样

Answer 4

试试这个

const CustomTab = withStyles({
  root: {
    backgroundColor: 'orange',
  },
  selected: {
    backgroundColor: 'purple',
  },
})(Tab);

然后

 <Tabs>
    <CustomTab label='One' />
    <CustomTab label='Two' />
    <CustomTab label='Three' />
 </Tabs>

改变反应材料-ui中的活动标签背景颜色

4 个答案: