使用材质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?和Add text to Switch formcontrol and change it in toggle using material ui。他们两个对我都没有帮助。

Answer 1

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

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

请检查我的代码和框示例：

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