Material 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

它要么是特异性问题，要么您只需要添加您对组件所做的 classes

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

编译为：

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

⚠️ 您需要将生成的两个 class 名称（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

Answer 2

下面的示例显示了控制复选框的一系列可能状态的颜色。 Material-UI 不管理 Checkbox 的 focused 状态，只有 focusVisible 状态，因此将焦点移动到 Checkbox 通过键盘将触发该状态。我通过使用 Checkbox.[=21 的 onFocus 和 onBlur 属性显式管理 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);

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

Material UI – Global checkbox focus styling (not locally)

javascript

reactjs

material-ui

react-material