如何使物料超载开关组件CSS [英] How to overload material Switch component css

问题描述

我正在尝试重载MuiSwitch-track类的交换机，但是它不起作用，基本上我想重载特定的交换机.我尝试使用

 "@ global":{".MuiSwitch-track":{backgroundColor:#d80c0a"} 

但是它使所有开关过载.有没有办法对单个开关执行相同的操作.

 <切换样式= {this.state.switchChecked?{color:"rgb(65，207，65)"}:{color:#d80c0a"}}size ="small"已检查= {switchChecked}onClick = {this.handleSwitchState}value ="userSwitch"/> 

解决方案

下面是一个示例，显示了如何自定义Switch的轨道颜色.这基于用于

I am trying to overload the MuiSwitch-track class of switch but it's not working.Basically i want to overload for a particular switch. I tried using

"@global": {
    ".MuiSwitch-track": {
      backgroundColor: "#d80c0a"
    }

but it overloaded all switches. Is there any way to do the same for a single switch.

 <Switch
                style={
                  this.state.switchChecked
                    ? { color: "rgb(65, 207, 65)" }
                    : { color: "#d80c0a" }
                }
                size="small"
                checked={switchChecked}
                onClick={this.handleSwitchState}
                value="userSwitch"
              />

解决方案

Below is an example showing how to customize the track color for a Switch. This is based on the approach used for the default styles.

import React from "react";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";

const CustomSwitch = withStyles({
  colorSecondary: {
    "&.Mui-checked + .MuiSwitch-track": {
      backgroundColor: "purple"
    }
  },
  track: {
    backgroundColor: "blue"
  }
})(Switch);

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

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

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

这篇关于如何使物料超载开关组件CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！