材质UI –全局复选框焦点样式（非本地）

Question

尝试使用Material-UI（反应）将复选框集中在全局级别时更改其样式。

目前只有默认样式和悬停样式有效：

MuiCheckbox: {
  colorSecondary: {
    color: 'green',
    '&:hover': {
      color: 'blue !important',
      border: '1px solid rgba(0,0,0,0.54)',
      outline: '2px auto rgba(19,124,189,.6)'
    }
  },
}

我正在尝试做的，但是没有用：

MuiCheckbox: {
  colorSecondary: {
    '&$focused': {
      color: 'blue',
      border: '1px solid rgba(0,0,0,0.54)',
      outline: '2px auto rgba(19,124,189,.6)'
    },
    '&$focusVisible': {
      color: 'blue',
      border: '1px solid rgba(0,0,0,0.54)',
      outline: '2px auto rgba(19,124,189,.6)'
    },
  }
}

Answer 1

以下示例显示了控制Checkbox可能状态的颜色的方法。 Material-UI不会管理focused的{​​{1}}状态，而只能管理Checkbox状态，因此通过键盘将焦点移至focusVisible会触发该状态。在下面的示例中，通过使用Checkbox的{​​{1}}和focused属性显式管理focused状态，在下面的示例中显示了onFocus样式。

onBlur

Answer 2

它要么是特定性问题，要么只需要向组件添加您制作的类

const styles = {
  root: {
    '&$disabled': {
      color: 'white',
    },
  },
  disabled: {},
};

编译为：

.root-x.disable-x {
  color: white;
}

⚠️您需要将两个生成的类名（根和禁用的）应用于DOM才能起作用。

<Button
  disabled
  classes={{
    root: classes.root, // class name, e.g. `root-x`
    disabled: classes.disabled, // class name, e.g. `disabled-x`
  }}
>

我是从文献中得到的

https://material-ui.com/customization/components/#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet