MuiInputLabel-shrink 更改样式 - Javascript

当我们使用 Material UI 中的 InputLabel 组件时，通常需要对输入框中的文本标签进行样式定制。在 InputLabel 组件中，当输入框中存在内容时，标签会发生收缩动画，此时会自动添加 MuiInputLabel-shrink 类名，我们可以根据这个类名自定义样式。

方法

方法一：使用 withStyles

使用 withStyles 函数和 MuiInputLabel-shrink 类名，可以方便地对 InputLabel 组件进行样式定制。

import { withStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';

const styles = {
  shrink: {
    transform: 'translate(0, 1.5px) scale(0.75)',
  },
};

const CustomInputLabel = withStyles(styles)(({ classes, ...rest }) => (
  <InputLabel
    classes={{
      shrink: classes.shrink,
    }}
    {...rest}
  />
));

方法二：使用 global CSS

我们可以使用 ThemeProvider 和 createMuiTheme 来全局定义 InputLabel 的样式，以下为示例代码：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';

const theme = createMuiTheme({
  overrides: {
    MuiInputLabel: {
      shrink: {
        transform: 'translate(0, 1.5px) scale(0.75)',
      },
    },
  },
});

const CustomInputLabel = ({ ...rest }) => (
  <ThemeProvider theme={theme}>
    <InputLabel {...rest} />
  </ThemeProvider>
);

结语

通过以上方法，我们可以轻松地对 InputLabel 组件的样式进行自定义，让输入框的标签更加满足具体业务需求。