Изменить цвет фона непроверенного флажка Material-UI - PullRequest
Новая
       26

Изменить цвет фона непроверенного флажка Material-UI

1 голос
/ 07 ноября 2019

Я работаю с React-Redux и Material-UI для стилизации. У меня есть , который находится на панели инструментов. Цвет фона панели инструментов - синий (# 295ED9).

Мне удалось изменить цвет флажка, когда он установлен. Я также изменил цвет контура флажка на белый, когда он не отмечен.

Проблема: Я не могу изменить цвет фона / цвет заливки флажка, когда онне проверяется. Это всегда тот же цвет, что и на панели инструментов (синий - # 295ED9).

Я попытался изменить атрибуты background-color, color и fill для и набелый.

Лучший результат, который я могу получить, - это изменить атрибут заполнения на белый. К сожалению, при снятии флажка этот флажок не заполняется белым фоном.

JSX 

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

SCSS 

.hasBalance {
  grid-area: balance;

  .MuiSvgIcon-root {
    fill: white;
  }
}

Элементы в Chrome Inspect Tool 

<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 на белый. Спасибо.

1 Ответ

3 голосов
/ 08 ноября 2019

Ниже приведен подход, который работает. При этом используется псевдоэлемент «: 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

Связанный вопрос: Изменитьцвет галочки в материале MuiCheckbox UI

...