materialUi修改组件样式
materialUi修改组件样式
biaoblog.cn 个人博客
发布于 2022-08-11 19:14:07
发布于 2022-08-11 19:14:07
举例：想修改这个输入框的边角为直角（把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);
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读