一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    materialUi修改组件样式

    技术 130 2021-02-24 11:16

    举例:想修改这个输入框的边角为直角(把border-radius设为0).

    组件的代码如下:

               <Autocomplete
                  className={classes.root}
                  multiple
                  limitTags={2}
                  style={{ minWidth: 200 ,borderRadius:0}}
                  ChipProps={{ size: 'small' }}
                  value={prevFilters}
                  onChange={(e, value) => {
                    this.onchangeHandler(value);
                  }}
                  options={clientCompanyOpt}
                  disableCloseOnSelect
                  getOptionLabel={(option) => option.label}
                  renderOption={(option, { selected }) => (
                    <React.Fragment>
                      <Checkbox
                        color="primary"
                        size="small"
                        style={{ marginRight: 8  }}
                        checked={selected}
                      />
                      {option.label}
                    </React.Fragment>
                  )}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      variant="outlined"
                      label=""
                      placeholder="Select"
                      size="small"
                    />
                  )}
                />
    

    这时候会发现在组件内直接添加border-radius不会生效,

    这个时候就需要使用materialUi提供的withStyle来修改组件的内部样式了

    然后在浏览器中打开调试工具(F12),找到这个input的border-radius所对应的样式名,


    看到所对应的样式名为:.MuiOutlinedInput-root

    然后就可以在声明的styles中去修改了

    const styles = {
      root: {  //这个是默认的最顶部的根样式,根据官网可得
        '& .MuiOutlinedInput-root': {
          borderRadius: '0px',
        },
      },
    };
    

    然后记得暴露组件之前先把with-style进行引入。

    import { withStyles } from '@material-ui/core/styles';

    最后在使用with-style包裹一下组件即可生效了。

    export default withStyles(styles)(BarChart);

    文章评论

    评论列表(0