【问题标题】:material ui change the checkbox color材质 ui 更改复选框颜色
【发布时间】:2019-09-26 14:55:43
【问题描述】:
  • 我正在尝试更改复选框和单选按钮的颜色。
  • 所以我做了一个研究并得到了这个链接。 Material UI change Input's active color

  • 但我仍然收到错误消息。 (0 , _styles2.createMuiTheme) is not a function

  • 你能告诉我如何更改复选框的颜色,以便我可以在其他地方使用它

https://codesandbox.io/s/m7z2l1j09y

const theme = createMuiTheme({
  palette: {
    secondary: {
      main: "#E33E7F"
    },

    formControl: {
      color: "black"
    }
  }
});

<MuiThemeProvider theme={theme}>
          <FormControl component="fieldset" className={classes.formControl}>
            <FormLabel component="legend">Gender</FormLabel>
            <RadioGroup
              aria-label="Gender"
              name="gender1"
              className={classes.group}
              value={this.state.value}
              onChange={this.handleChange}
            >
              {radioValues.map(radio => {
                return (
                  <FormControlLabel
                    value={radio.value}
                    control={<Radio />}
                    label={radio.label}
                  />
                );
              })}
            </RadioGroup>
            {checkBoxvalues.map((check, index) => {
              return (
                <FormControlLabel
                  key={check.value}
                  control={
                    <Checkbox
                      checked={check.checked}
                      onChange={this.handleCheckBoxChange(check.value, index)}
                      value={check.value}
                    />
                  }
                  label={check.label}
                />
              );
            })}
          </FormControl>
        </MuiThemeProvider>

【问题讨论】:

    标签: javascript html css reactjs material-ui


    【解决方案1】:

    您的错误是由于import 不正确。 而不是

    import { MuiThemeProvider, createMuiTheme } from "material-ui/styles";
    

    应该是

    import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
    

    我还添加了在 Checkbox 上指定 color 属性。

    这是您的沙盒的工作版本:https://codesandbox.io/s/w68nm77o0k

    【讨论】:

      猜你喜欢
      • 2022-01-12
      • 2021-12-26
      • 2018-12-01
      • 1970-01-01
      • 2015-01-06
      • 1970-01-01
      • 1970-01-01
      • 2020-02-05
      • 1970-01-01
      相关资源
      最近更新 更多