gpt4 book ai didi

javascript - Material UI – 全局复选框焦点样式(不是本地)

转载 作者:行者123 更新时间:2023-11-28 10:37:20 26 4
gpt4 key购买 nike

尝试使用 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)'
},
}
}

最佳答案

下面的示例显示了控制复选框的一系列可能状态的颜色。 Material-UI 不管理 Checkboxfocused 状态,仅管理 focusVisible 状态,因此将焦点移至 Checkbox 通过键盘将触发该状态。我通过使用 onFocusonBlur 显式管理 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);

Edit Checkbox focus styling

关于javascript - Material UI – 全局复选框焦点样式(不是本地),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59374131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com