materialUi修改组件样式

举例：想修改这个输入框的边角为直角（把border-radius设为0）.

组件的代码如下：

代码语言：javascript复制

           <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中去修改了

代码语言：javascript复制

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

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

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

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

export default withStyles(styles)(BarChart);

border core import styles ui

0 人点赞