使用 Material ui 在开关内添加文本

Question

我正在使用 Material UI 的 Switch 组件，我想在其中添加文本。我想要如下图所示的东西。

这是我的代码。

import React from 'react';
import Switch from '@material-ui/core/Switch';

export default function Switches() {
  const [state, setState] = React.useState({
    checkedA: true,
  });

  const handleChange = (event) => {
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  return (
    <div>
      <Switch
        checked={state.checkedA}
        onChange={handleChange}
        name="checkedA"
        inputProps={{ 'aria-label': 'secondary checkbox' }}
      />
    </div>
  );
}

我已经搜索了答案并找到了How to add text inside a Switch Component in Material-UI React? 并将文本添加到 Switch formcontrol 并使用 Material ui 在切换中更改它。他们两个对我都没有帮助。

Answer 1

您可以通过添加伪元素:after和:beforetoSwitch的track内部元素（其中包含文本）来实现此目的。content使用所需的文本向这些伪元素添加属性，并使用绝对定位放置它们。

要覆盖 Material-UI 组件样式，您可以使用makeStyles钩子生成器。要访问组件的内部元素，您可以使用 propclasses或常规全局类名称，例如.MuiSwitch-track. 请参阅https://material-ui.com/customization/components/

请检查我的codesandbox示例：

https://codesandbox.io/s/confident-euler-98tqo?file=/src/App.js