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

Posted 2023-02-22

【中文标题】Material UI – 全局复选框焦点样式（非本地）

【英文标题】：Material UI – Global checkbox focus styling (not locally)

【发布时间】：2020-04-09 22:47:56

【问题描述】：

尝试使用 Material-UI (react) 在全局级别聚焦时更改复选框的样式。

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

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)'
    ,
  

【问题讨论】：

不应该是&:focus和&:focus-visible吗？ developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

试过了，可惜也没用。

【参考方案1】：

下面的示例显示了控制复选框的一组可能状态的颜色。 Material-UI 不管理Checkbox 的focused 状态，仅管理focusVisible 状态，因此通过键盘将焦点移至Checkbox 将触发该状态。通过使用onFocus 和onBlur 的Checkbox 属性显式管理focused 状态，我在下面的示例中展示了focused 样式。

import React from "react";
import ReactDOM from "react-dom";

import  createMuiTheme, ThemeProvider  from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";

const theme = createMuiTheme(
  overrides: 
    MuiCheckbox: 
      colorSecondary: 
        color: "green",
        "&:hover": 
          color: "blue"
        ,
        "&$checked": 
          color: "purple",
          "&:hover": 
            color: "lightblue"
          ,
          "&.Mui-focusVisible": 
            color: "red"
          
        ,
        "&.Mui-focusVisible": 
          color: "orange"
        ,
        "&.focused:not(.Mui-focusVisible):not($checked)": 
          color: "pink"
        
      
    
  
);
function App() 
  const [focused, setFocused] = React.useState(false);
  return (
    <ThemeProvider theme=theme>
      <div className="App">
        <Checkbox
          className=focused ? "focused" : ""
          onFocus=() => setFocused(true)
          onBlur=() => setFocused(false)
        />
        <input value="somewhere to move focus" />
      </div>
    </ThemeProvider>
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【参考方案2】：

它要么是特异性的问题，要么你只需要将你创建的类添加到你的组件中

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

编译为：

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

⚠️ 您需要将生成的两个类名（root 和 disabled）应用到 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