使用材质 ui 在开关内添加文本答案

【问题标题】：Add text inside the switch using material ui使用材质 ui 在开关内添加文本
【发布时间】：2020-11-03 07:23:35
【问题描述】：

我正在使用 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 。他们两个对我都没有帮助。

【问题讨论】：

我不相信这在 4.11.0 版本中是可能的。这些示例将标签放在开关组件之外。 github.com/mui-org/material-ui/issues/20188
看这里（开关 I）：mui-treasury.com/styles/switch

标签： javascript html reactjs material-ui

【解决方案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

【讨论】：