英文:
How to style Material UI v5 Switch via Theme?
问题
我已经根据我的设计实现了 Material Switch，但我制作了一个自定义组件并使用 styled 和 sx 属性对其进行了样式设置，但我想知道如何在主题中完成，以便当我从 Mui 中导入 Switch 时能够获取我的设计的开关。
以下是您尝试在主题中样式化它的内容，但未能成功。
const theme = createTheme({
MuiSwitch: {
styleOverrides: {
root: {
'&:active': {
'& .MuiSwitch-thumb': {
width: 12,
},
'& .MuiSwitch-switchBase.Mui-checked': {
transform: 'translateX(9px)',
},
},
},
thumb: {
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
width: 12,
height: 12,
borderRadius: 6,
transition: 'width 200ms',
'&:active': {
width: 12,
},
},
track: {
borderRadius: 8,
opacity: 1,
backgroundColor: 'rgba(0,0,0,.25)',
},
switchBase: {
padding: 2,
'&.Mui-checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: '#00A1E0',
},
},
'&.Mui-checked': {
transform: 'translateX(9px)',
},
},
checked: {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: '#00A1E0',
},
},
},
},
});
我对于选中状态和活动状态以及如何定位这些伪类内的类感到困惑。任何 Mui 专家可以帮助我吗？
英文:
I have implemented Material Switch according to my design but I have made a custom component and have styled it using styled and sx prop but I was wondering how to do it in theme itself so that when I import Switch from Mui I get my designed switch.
const CustomMuiSwitch = styled(Switch)(({ theme }: { theme: any }) => ({
width: 28,
height: 16,
padding: 0,
display: 'flex',
margin: 'auto',
'&:active': {
'& .MuiSwitch-thumb': {
width: 12,
},
'& .MuiSwitch-switchBase.Mui-checked': {
transform: 'translateX(9px)',
},
},
'& .MuiSwitch-switchBase': {
padding: 2,
'&.Mui-checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: '#00A1E0',
},
},
},
'& .MuiSwitch-thumb': {
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
width: 12,
height: 12,
borderRadius: 6,
transition: theme?.transitions?.create(['width'], {
duration: 200,
}),
},
'& .MuiSwitch-track': {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: 'rgba(0,0,0,.25)',
},
}));
And this is what I tried to style it in theme itself but I was not able to do it.
const theme = createTheme({
MuiSwitch: {
styleOverrides: {
root: {
':active': {
'& .MuiSwitch-thumb': {
width: 12,
},
'& .MuiSwitch-switchBase.Mui-checked': {
transform: 'translateX(9px)',
},
},
},
thumb: {
boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
width: 12,
height: 12,
borderRadius: 6,
transition: 'width 200',
':active': {
width: 12,
},
},
track: {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: 'rgba(0,0,0,.25)',
},
switchBase: {
padding: 2,
':checked': {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: '#00A1E0',
},
},
'.Mui-checked': {
transform: 'translateX(9px)',
},
},
checked: {
transform: 'translateX(12px)',
color: '#fff',
'& + .MuiSwitch-track': {
opacity: 1,
backgroundColor: '#00A1E0',
},
},
},
},
},
});
I am just confused about the checked and active state and how to target classes within these pseudo-class. Any Mui experts can you please help me with this?
答案1
得分: 2
你的createTheme()调用缺少了顶层components属性。你的CSS也有一些问题，但整体上已经接近正确了：
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
width: 28,
height: 16,
padding: 0,
display: "flex",
margin: "auto",
"&:active": {
"& .MuiSwitch-thumb": {
width: 12,
},
"& .MuiSwitch-switchBase.Mui-checked": {
transform: "translateX(9px)",
},
},
},
thumb: {
boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
width: 12,
height: 12,
borderRadius: 6,
transition: "width 200",
},
track: {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: "rgba(0,0,0,.25)",
},
switchBase: {
padding: 2,
"&.Mui-checked": {
transform: "translateX(12px)",
color: "#fff",
"& + .MuiSwitch-track": {
opacity: 1,
backgroundColor: "#00A1E0",
},
},
"& .Mui-checked": {
transform: "translateX(9px)",
},
},
},
},
},
});
这里有一个可工作的示例，你可以看到不再需要样式化的开关。
英文:
You're missing the overall components top-level property for your createTheme() call. There's also a few things off in your CSS but overall it's almost there:
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
width: 28,
height: 16,
padding: 0,
display: "flex",
margin: "auto",
"&:active": {
"& .MuiSwitch-thumb": {
width: 12,
},
"& .MuiSwitch-switchBase.Mui-checked": {
transform: "translateX(9px)",
},
},
},
thumb: {
boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
width: 12,
height: 12,
borderRadius: 6,
transition: "width 200",
},
track: {
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: "rgba(0,0,0,.25)",
},
switchBase: {
padding: 2,
"&.Mui-checked": {
transform: "translateX(12px)",
color: "#fff",
"& + .MuiSwitch-track": {
opacity: 1,
backgroundColor: "#00A1E0",
},
},
"& .Mui-checked": {
transform: "translateX(9px)",
},
},
},
},
},
});
Here's a working sandbox where you can see the styled switch is no longer needed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论