如何通过主题样式化Material UI v5开关？

huangapple
go评论95阅读模式
英文:

How to style Material UI v5 Switch via Theme?

问题

我已经根据我的设计实现了 Material Switch，但我制作了一个自定义组件并使用 styled 和 sx 属性对其进行了样式设置，但我想知道如何在主题中完成，以便当我从 Mui 中导入 Switch 时能够获取我的设计的开关。

以下是您尝试在主题中样式化它的内容，但未能成功。

  1. const theme = createTheme({
  2.   MuiSwitch: {
  3.     styleOverrides: {
  4.       root: {
  5.         '&:active': {
  6.           '& .MuiSwitch-thumb': {
  7.             width: 12,
  8.           },
  9.           '& .MuiSwitch-switchBase.Mui-checked': {
  10.             transform: 'translateX(9px)',
  11.           },
  12.         },
  13.       },
  14.       thumb: {
  15.         boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
  16.         width: 12,
  17.         height: 12,
  18.         borderRadius: 6,
  19.         transition: 'width 200ms',
  20.         '&:active': {
  21.           width: 12,
  22.         },
  23.       },
  24.       track: {
  25.         borderRadius: 8,
  26.         opacity: 1,
  27.         backgroundColor: 'rgba(0,0,0,.25)',
  28.       },
  29.       switchBase: {
  30.         padding: 2,
  31.         '&.Mui-checked': {
  32.           transform: 'translateX(12px)',
  33.           color: '#fff',
  34.           '& + .MuiSwitch-track': {
  35.             opacity: 1,
  36.             backgroundColor: '#00A1E0',
  37.           },
  38.         },
  39.         '&.Mui-checked': {
  40.           transform: 'translateX(9px)',
  41.         },
  42.       },
  43.       checked: {
  44.         transform: 'translateX(12px)',
  45.         color: '#fff',
  46.         '& + .MuiSwitch-track': {
  47.           opacity: 1,
  48.           backgroundColor: '#00A1E0',
  49.         },
  50.       },
  51.     },
  52.   },
  53. });

我对于选中状态和活动状态以及如何定位这些伪类内的类感到困惑。任何 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.

  1. const CustomMuiSwitch = styled(Switch)(({ theme }: { theme: any }) => ({
  2.   width: 28,
  3.   height: 16,
  4.   padding: 0,
  5.   display: 'flex',
  6.   margin: 'auto',
  7.   '&:active': {
  8.     '& .MuiSwitch-thumb': {
  9.       width: 12,
  10.     },
  11.     '& .MuiSwitch-switchBase.Mui-checked': {
  12.       transform: 'translateX(9px)',
  13.     },
  14.   },
  15.   '& .MuiSwitch-switchBase': {
  16.     padding: 2,
  17.     '&.Mui-checked': {
  18.       transform: 'translateX(12px)',
  19.       color: '#fff',
  20.       '& + .MuiSwitch-track': {
  21.         opacity: 1,
  22.         backgroundColor: '#00A1E0',
  23.       },
  24.     },
  25.   },
  26.   '& .MuiSwitch-thumb': {
  27.     boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
  28.     width: 12,
  29.     height: 12,
  30.     borderRadius: 6,
  31.     transition: theme?.transitions?.create(['width'], {
  32.       duration: 200,
  33.     }),
  34.   },
  35.   '& .MuiSwitch-track': {
  36.     borderRadius: 16 / 2,
  37.     opacity: 1,
  38.     backgroundColor: 'rgba(0,0,0,.25)',
  39.   },
  40. }));

如何通过主题样式化Material UI v5开关？

And this is what I tried to style it in theme itself but I was not able to do it.

  1. const theme = createTheme({
  2.     MuiSwitch: {
  3.       styleOverrides: {
  4.         root: {
  5.           ':active': {
  6.             '& .MuiSwitch-thumb': {
  7.               width: 12,
  8.             },
  9.             '& .MuiSwitch-switchBase.Mui-checked': {
  10.               transform: 'translateX(9px)',
  11.             },
  12.           },
  13.         },
  14.         thumb: {
  15.           boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
  16.           width: 12,
  17.           height: 12,
  18.           borderRadius: 6,
  19.           transition: 'width 200',
  20.           ':active': {
  21.             width: 12,
  22.           },
  23.         },
  24.         track: {
  25.           borderRadius: 16 / 2,
  26.           opacity: 1,
  27.           backgroundColor: 'rgba(0,0,0,.25)',
  28.         },
  29.         switchBase: {
  30.           padding: 2,
  31.           ':checked': {
  32.             transform: 'translateX(12px)',
  33.             color: '#fff',
  34.             '& + .MuiSwitch-track': {
  35.               opacity: 1,
  36.               backgroundColor: '#00A1E0',
  37.             },
  38.           },
  39.           '.Mui-checked': {
  40.             transform: 'translateX(9px)',
  41.           },
  42.         },
  43.         checked: {
  44.           transform: 'translateX(12px)',
  45.           color: '#fff',
  46.           '& + .MuiSwitch-track': {
  47.             opacity: 1,
  48.             backgroundColor: '#00A1E0',
  49.           },
  50.         },
  51.       },
  52.     },
  53.   },
  54. });

如何通过主题样式化Material UI v5开关？

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也有一些问题，但整体上已经接近正确了：

  1. const theme = createTheme({
  2.   components: {
  3.     MuiSwitch: {
  4.       styleOverrides: {
  5.         root: {
  6.           width: 28,
  7.           height: 16,
  8.           padding: 0,
  9.           display: "flex",
  10.           margin: "auto",
  11.           "&:active": {
  12.             "& .MuiSwitch-thumb": {
  13.               width: 12,
  14.             },
  15.             "& .MuiSwitch-switchBase.Mui-checked": {
  16.               transform: "translateX(9px)",
  17.             },
  18.           },
  19.         },
  20.         thumb: {
  21.           boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
  22.           width: 12,
  23.           height: 12,
  24.           borderRadius: 6,
  25.           transition: "width 200",
  26.         },
  27.         track: {
  28.           borderRadius: 16 / 2,
  29.           opacity: 1,
  30.           backgroundColor: "rgba(0,0,0,.25)",
  31.         },
  32.         switchBase: {
  33.           padding: 2,
  34.           "&.Mui-checked": {
  35.             transform: "translateX(12px)",
  36.             color: "#fff",
  37.             "& + .MuiSwitch-track": {
  38.               opacity: 1,
  39.               backgroundColor: "#00A1E0",
  40.             },
  41.           },
  42.           "& .Mui-checked": {
  43.             transform: "translateX(9px)",
  44.           },
  45.         },
  46.       },
  47.     },
  48.   },
  49. });

这里有一个可工作的示例，你可以看到不再需要样式化的开关。

英文:

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:

  1. const theme = createTheme({
  2.   components: {
  3.     MuiSwitch: {
  4.       styleOverrides: {
  5.         root: {
  6.           width: 28,
  7.           height: 16,
  8.           padding: 0,
  9.           display: "flex",
  10.           margin: "auto",
  11.           "&:active": {
  12.             "& .MuiSwitch-thumb": {
  13.               width: 12,
  14.             },
  15.             "& .MuiSwitch-switchBase.Mui-checked": {
  16.               transform: "translateX(9px)",
  17.             },
  18.           },
  19.         },
  20.         thumb: {
  21.           boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
  22.           width: 12,
  23.           height: 12,
  24.           borderRadius: 6,
  25.           transition: "width 200",
  26.         },
  27.         track: {
  28.           borderRadius: 16 / 2,
  29.           opacity: 1,
  30.           backgroundColor: "rgba(0,0,0,.25)",
  31.         },
  32.         switchBase: {
  33.           padding: 2,
  34.           "&.Mui-checked": {
  35.             transform: "translateX(12px)",
  36.             color: "#fff",
  37.             "& + .MuiSwitch-track": {
  38.               opacity: 1,
  39.               backgroundColor: "#00A1E0",
  40.             },
  41.           },
  42.           "& .Mui-checked": {
  43.             transform: "translateX(9px)",
  44.           },
  45.         },
  46.       },
  47.     },
  48.   },
  49. });

Here's a working sandbox where you can see the styled switch is no longer needed.

huangapple
  • 本文由 发表于 2023年2月24日 13:04:39
  • 转载请务必保留本文链接：https://go.coder-hub.com/75552798.html
  • material-ui
  • reactjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定