前端之家

  1. 首页
  2. 问答

更改未选中的Material-UI复选框的背景颜色

• 问答

我正在使用React-Redux和Material-UI进行样式设计。我在工具栏上有一个。工具栏的背景颜色为蓝色（＃295ED9）。

我已经设法更改了复选框的颜色（选中该复选框时）。当未选中时，我还将复选框轮廓的颜色更改为白色。

问题：：如果未选中该复选框，则无法更改其背景颜色/填充颜色。它始终与工具栏上的颜色相同（蓝色-＃295ED9）。

我尝试将和的背景颜色，颜色和填充属性更改为白色。

我可以获得的最佳结果是将 fill属性更改为白色。不幸的是，如果未选中该复选框，则不会使该复选框填充白色背景。

JSX 

<div classname="hasBalance">
  <FormControlLabel
    control={<Checkbox color="primary"/>}
    label="Has Balance"
  />
</div>

SCSS 

.hasBalance {
  grid-area: balance;

  .MuiSvgIcon-root {
    fill: white;
  }
}

Chrome检查工具中的元素

<div class="hasBalance">
  <label class="MuiFormControlLabel-root">
    <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-143 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary" aria-disabled="false">
      <span class="MuiIconButton-label">
        <input class="PrivateSwitchBase-input-146" type="checkbox" data-indeterminate="false" value="">
        <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
          <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
        </svg>
      </span>
      <span class="MuiTouchRipple-root"></span>
    </span>
    <span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Has Balance</span>
  </label>
</div>

目标是将未选中的Material-UI复选框的背景色/填充色更改为白色。谢谢。

sdn199 回答：更改未选中的Material-UI复选框的背景颜色

以下是一种可行的方法。这使用“：after”伪元素在SVG后面放置白色背景。

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

const WhiteBackgroundCheckbox = withStyles(theme => ({
  root: {
    color: "red","& .MuiIconButton-label": {
      position: "relative",zIndex: 0
    },"&:not($checked) .MuiIconButton-label:after": {
      content: '""',left: 4,top: 4,height: 15,width: 15,position: "absolute",backgroundColor: "white",zIndex: -1
    }
  },checked: {}
}))(Checkbox);

function App() {
  return (
    <div style={{ backgroundColor: "blue" }}>
      <WhiteBackgroundCheckbox />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

Edit Checkbox background color

相关问题：Change the tick color in MuiCheckbox material UI

checkboxcssmaterial-uireact-reduxreactjs
本文链接：https://www.f2er.com/3141904.html

大家都在问