如何更改React material-ui中的活动标签颜色？

Question

如何更改活动标签的颜色？

我的意思是,这一pink行,看看图片.

Answer 1

你可以试试这个材质 UI 最新版本支持 TabIndicatorProps，你可以通过它传递样式键。

<Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}>......

Answer 2

嗯,你有两个选择:

您可以自定义主题:http:
//www.material-ui.com/#/customization/themes

但最简单的方法是使用该inkBarStyle属性.
你可以在文档中看到它..
示例:

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

Answer 3

尝试这个

import { makeStyles} from '@mui/styles';

    const useStyles = makeStyles({
  tabs: {

    "& .MuiTabs-indicator": {
      backgroundColor: "orange",
      height: 3,
    },
    "& .MuiTab-root.Mui-selected": {
      color: 'red'
    }
  }
})

进而

const classes = useStyles();
<Tabs
    value={value}
    onChange={handleChange}
    // textColor="secondary"
    // indicatorColor="secondary"
    aria-label="secondary tabs example"
    className={classes.tabs}
    // TabIndicatorProps={{
    //   style: { background: "green", height: 3}
    // }}
  >
  <Tab label={<span className={styles.tabs}>{ABOUT_US}</span>} component={Link} to="/about-us" />
  <Tab label={<span className={styles.tabs}>{ABOUT_HANBANABORINA}</span>} component={Link} to="/about-hanbanaborina" />
  <Tab label={<span className={styles.tabs}>{DOWNLOAD_APPLICATION}</span>} component={Link} to="/download" />
  <Tab label={<span className={styles.tabs}>{HOME}</span>} component={Link} to="/" />
  </Tabs>

Answer 4

材质 UI v5 更新

您可以使用sxMaterial UI v5 中的 prop 代替内联样式。声明自定义颜色：

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      backgroundColor: 'red',
    },
  }}
>

许多sx属性也是主题感知的。要使用调色板中的一种颜色：

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      backgroundColor: 'secondary.main',
    },
  }}
>

或者，如果您想全局更改指示器颜色：

const theme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        indicator: {
          backgroundColor: 'orange',
          height: 3,
        },
      },
    },
  },
});

现场演示

Answer 5

@Risa的解决方案效果很好，应该是公认的答案。我对她的解释示例如下：

<Tabs
  fullWidth
  centered
  classes={{
    indicator: classes.indicator
  }}>
    <Tab />
    <Tab />
</Tabs>

和样式：

const styles = theme => ({
  indicator: {
    backgroundColor: 'white',
  },
})

Answer 6

嗨，如果有人在更改颜色方面仍然有问题，以下对我有用

<Tabs
value={value}
onChange={this.handleChange}
TabIndicatorProps={{
style: {
  backgroundColor: "#D97D54"
 }
}}
>
...
</Tabs>

Answer 7

我把 2019 年的更新结束在这里，因为我没有在这里找到我的答案。很多答案都贬值了。

在没有太多痛苦的情况下进行覆盖的最佳方法似乎是使用 material-ui 的 makeStyle 和 withStyles。

这是一个带有选项卡的示例。

你需要导入 makeStyles

    import { makeStyles } from '@material-ui/core/styles'
    import Tabs from '@material-ui/core/Tabs'

这是我使用 makeStyles() 的海关课程

     const useStyles = makeStyles((theme) => ({
     customOne: {
        padding: '3rem 15rem',
        flexGrow: 1,
        backgroundColor: theme.palette.background.paper,
        fontFamily: 'Open Sans',
     },
     customTwo: {
        padding: '0rem',
        color: '#484848',
        backgroundColor: 'white',
        fontFamily: 'Open Sans',
        fontSize: '1rem',
    },
   }))

要获得更多覆盖，您还可以使用 withStyles() 创建一个使用 props 的函数，该函数通过材质 ui（root 等）使用：

    const TabStyle = withStyles((theme) => ({
    root: {
       padding: '1rem 0',
       textTransform: 'none',
       fontWeight: theme.typography.fontWeightRegular,
       fontSize: '1.2rem',
       fontFamily: [
           '-apple-system',
           'BlinkMacSystemFont',
           'Roboto',
       ].join(','),
       '&:hover': {
          backgroundColor: '#004C9B',
          color: 'white',
          opacity: 1,
       },
      '&$selected': {
          backgroundColor: '#004C9B',
          color: 'white',
          fontWeight: theme.typography.fontWeightMedium,
      },
  },
  tab: {
      padding: '0.5rem',
      fontFamily: 'Open Sans',
      fontSize: '2rem',
      backgroundColor: 'grey',
      color: 'black',
      '&:hover': {
          backgroundColor: 'red',
          color: 'white',
          opacity: 1,
      },
  },
  selected: {},
  }))((props) => <Tab {...props} />)

在我的组件中，我定义了： const classes = useStyles() 允许在类中更改我的 useStyles 道具。

我随时使用我的自定义类： className={classes.customOne}

    export default function TabsCustom({ activeTabIndex, onChange, values }) {
    const classes = useStyles()
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
       setValue(newValue)
  }


    return (
        <div className={classes.customOne}>
            <Tabs
                className={classes.customTwo}
                variant="fullWidth"
                value={activeTabIndex}
                onChange={onChange}
                aria-label="tabs"
            >
                <TabStyle
                    value="updateDate"
                    icon={(<Icon>insert_invitation</Icon>)}
                    label={i18n.perYear}
                />

            </Tabs>
    </div>
   )
 }

希望有帮助。如果我找到了这个解释，就我个人而言，我会获得很多时间（和痛苦）。

Answer 8

无论谁正在使用 Mui v5+，并且想要将其配置为组件样式，请使用自定义主题覆盖：

MuiTab: {
  styleOverrides: {
    root: {
      '&.Mui-selected': {
        color: theme.menuSelected
      }
    }
  }
},
MuiTabs: {
  styleOverrides: {
    indicator: {
      backgroundColor: theme.menuSelected
    }
  }
}

MuiTab 指的是 to<Tab />组件，MuiTabs 指的是<Tabs />。

Answer 9

示例一：

JS：

<Tabs indicatorColor="primary" classes={{ indicator: classes.indicator }}>

风格：

indicator:{
      backgroundColor: 'green'
    }

例子二：

<Tabs TabIndicatorProps={{style: {background:'green'}}} >