如何设置输入激活时的文本字段标签样式？及默认标签样式疑问

默认缩小标签对应的样式 #

默认状态下（输入框无内容、未激活）的小尺寸标签，并非labelSmall/labelMedium这类通用标签尺寸样式，而是对应输入框组件的「收缩状态标签」类，分组件库说明如下：

若使用Material UI #

对应MuiFormLabel组件的shrink状态类，需覆盖.MuiFormLabel-root.MuiFormLabel-shrink的样式：

// 主题全局配置示例
const theme = createTheme({
  components: {
    MuiFormLabel: {
      styleOverrides: {
        root: {
          '&.MuiFormLabel-shrink': {
            fontSize: '1rem',
            fontWeight: 500
          }
        }
      }
    }
  }
});

若使用Ant Design #

对应ant-form-item-label-shrink类，直接修改该类样式即可：

.ant-form-item-label-shrink {
  font-size: 14px;
}

输入激活时的标签样式设置 #

输入框获得焦点时，可通过「焦点状态类」或伪类控制标签样式：

Material UI 实现方式 #

全局主题配置

const theme = createTheme({
  components: {
    MuiFormLabel: {
      styleOverrides: {
        root: {
          '&.Mui-focused': {
            color: '#1976d2',
            fontSize: '1.1rem',
            fontWeight: 600
          }
        }
      }
    }
  }
});

组件内单独设置

<TextField
  label="Demo Text"
  InputLabelProps={{
    className: 'custom-label'
  }}
/>

/* 全局样式 */
.custom-label.Mui-focused {
  color: #2e7d32;
  font-size: 1.1rem;
}

Ant Design 实现方式 #

利用:focus-within伪类关联输入框焦点与标签样式：

.ant-form-item:focus-within .ant-form-item-label > label {
  color: #1890ff;
  font-size: 15px;
  font-weight: 500;
}

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