覆盖此类的字体大小 .MuiTypography-body1

IT技术 javascript html css reactjs material-ui
2021-05-02 05:13:29
  • 我试图覆盖这个类的字体大小 .MuiTypography-body1
  • 所以我研究并找到了这个链接 https://material-ui.com/api/typography/
  • 但问题是它没有覆盖
  • 你能告诉我怎么修吗?
  • 在下面提供我的代码片段和下面的沙箱

https://codesandbox.io/s/material-demo-yr83v

const useStyles = makeStyles(theme => ({
  root: {
    fontSize: "2"
  },


  checkboxLabel: {
    border: "1px solid black",
    fontWeight: "100",
    fontSize: "20"
  },
  body1Text: {
    fontSize: "2"
  }
}));


 <div
      classes={{
        body1: classes.body1Text
      }}
      className={classes.root}
    >
      <FormControl
        classes={{
          body1: classes.body1Text
        }}
        component="fieldset"
        className={classes.formControl}
      >
        <FormLabel
          classes={{
            body1: classes.body1Text
          }}
          component="legend"
        >
          Gender
        </FormLabel>
        <RadioGroup
          classes={{
            body1: classes.body1Text
          }}
          aria-label="gender"
          name="gender1"
          className={classes.group}
          value={value}
          onChange={handleChange}
        >
          {console.log("props", props)}
          {props.radioValues.map(val => {
            return (
              <FormControlLabel
                classes={{
                  body1: classes.body1Text,
                  label: classes.checkboxLabel
                }}
                style={{
                  fontWeight: "300",
                  fontSize: "2",
                  border: "1px solid red"
                }}
                value={val}
                control={
                  <Radio
                    classes={{
                      body1: classes.body1Text
                    }}
                    style={{
                      fontWeight: "100",
                      fontSize: "1",
                      border: "1px solid red"
                    }}
                    // classes={{
                    //   label: classes.checkboxLabel
                    // }}
                  />
                }
                label={val}
              />
            );
          })}
        </RadioGroup>
      </FormControl>
    </div>
2个回答

可以直接使用style={{fontSize:'sizeValue'}}。这也可以。

你快到了。您只需要为字体大小指定一个单位:

  checkboxLabel: {
     border: "1px solid black",
     fontWeight: "100",
     fontSize: "20px"
  },

说明:您想覆盖排版样式。参考FormControlLabel api:https : //material-ui.com/api/form-control-label/#formcontrollabel-api

在 css 部分,他们指定您需要使用“标签”规则名称来覆盖排版样式。这就是您在 FormControlLabel 类中所做的:

 classes={{
              body1: classes.body1Text,
              label: classes.checkboxLabel // here
            }}

您可以参考我覆盖所有 Typography-body1 样式的工作演示:https ://codesandbox.io/s/material-demo-h685r ? fontsize =14