如何修改Material-UI激活标签线条颜色及移除数字输入框增减按钮

1. 修改Tabs组件激活标签下方指示线条的颜色 #

直接通过Tabs组件的TabIndicatorProps属性传入自定义样式，即可修改指示线颜色：

<Tabs
  value={0}
  TabIndicatorProps={{
    style: {
      backgroundColor: 'red', // 替换成你需要的颜色
    },
  }}
>
  <Tab label="Tab 1" />
  <Tab label="Tab 2" />
  <Tab label="Tab 3" />
</Tabs>

该方法直接作用于指示线元素，无需额外全局样式，优先级足够确保生效。

2. 移除TextField（type="number"）的增减按钮 #

如果全局CSS未生效，推荐使用Material-UI内置的sx属性高优先级覆盖伪元素样式，避免样式冲突：

<TextField
  type="number"
  sx={{
    '& input[type="number"]': {
      '-moz-appearance': 'textfield', // 适配Firefox
    },
    '& input[type="number"]::-webkit-outer-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0, // 适配Chrome/Safari/Edge
    },
    '& input[type="number"]::-webkit-inner-spin-button': {
      '-webkit-appearance': 'none',
      margin: 0,
    },
  }}
  label="数字输入框"
/>

也可以通过styled组件封装复用：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const NoSpinTextField = styled(TextField)`
  & input[type="number"] {
    -moz-appearance: textfield;
  }
  & input[type="number"]::-webkit-outer-spin-button,
  & input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
`;

// 使用示例
<NoSpinTextField type="number" label="无增减按钮的数字输入框" />

这两种方式都能确保样式优先级高于默认样式，解决之前CSS不生效的问题。

内容的提问来源于stack exchange，提问作者Radhika Chabhadiya