javascript - 如何在material-ui中自定义事件选项卡的字体大小

Question

我的要求是只有事件选项卡应该具有特定的颜色和字体大小。

这是我的代码:

                    <Tabs
                        value={value}
                        onChange={handleChange}
                        classes={{indicator: classes.customStyleOnActiveTab}}
                        aria-label="some text"
                        >
                        <Tab label={<span className={classes.customStyleOnTab}>Tab 1</span>} />
                        <Tab label={<span className={classes.customStyleOnTab}> Tab 2</span>}/>
                    </Tabs>

但是，它更改了两个选项卡上的样式，而我只希望事件选项卡具有特定样式(蓝色和粗体)。另一个选项卡应具有正常的 font-weight 和 color:

如果我使用 textColor 属性，我可以实现所需的结果，但无法自定义它。我深入研究了 Material 文档，并最终尝试了他们公开的所有 CSS 类，但没有任何运气

Answer 1

要向事件选项卡添加自定义/不同样式，您可以有条件地向事件选项卡分配一个类。每个 Tab 都有自己的值(也是它们的索引值)并有条件地为它们分配类。

这是codesandbox的链接:- https://codesandbox.io/s/elegant-tu-lxi1g?file=/src/App.js

    import React, { useState } from "react";
    import "./styles.css";
    import {Tabs, Tab, makeStyles} from '@material-ui/core'

    export default function App() {
      const classes = useStyles()
      const [value, setValue] = useState(0)

      const handleChange = (e, newVal)=>{
        setValue(newVal)
      }


      return (
        <div className="App">
          <Tabs
            value={value}
            onChange={handleChange}
            classes={{indicator: classes.customStyleOnActiveTab}}
            aria-label="some text"
          >
            <Tab label={<span className={ value === 0 ? classes.activeTab : classes.customStyleOnTab}>Tab 1</span>} />
            <Tab label={<span className={ value === 1 ? classes.activeTab : classes.customStyleOnTab}> Tab 2</span>}/>
          </Tabs>
        </div>
      );
    }


    const useStyles = makeStyles({
      customStyleOnTab:{
        fontSize:'15px',
        color:'green'
      },
      customStyleOnActiveTab:{
        color:'red'
      },
      activeTab:{
        fontSize:'16px',
        fontWeight:'600',
        color:'pink'
      }
    })

此外，您还可以将 className 分配给 Tab 元素而不是 span ，以保持 label 属性干净、整洁和统一。