如何从material-ui react更改纸张组件的borderColor？
如何从material-ui react更改纸张组件的borderColor？
提问于 2020-01-03 20:49:52
我在material-ui中使用react，在material-ui中，我尝试使用具有一些自定义的纸张组件，比如将borderColor添加到绿色。
这是我尝试过的，
<Paper
style={{ padding: 50, }}
variant="outlined" square={true}
classes={{
root: classes.root, // class name, e.g. `classes-nesting-root-x`
}}
>
This paper component
</Paper> 这是我的定制风格。
root: {
borderRadius: 20,
borderColor: '#000'
},BorderRadius属性工作正常，但BorderColor属性不工作，
有什么建议吗？
回答 2
Stack Overflow用户
发布于 2020-01-03 20:57:52
在组件中将其与withstyles一起使用。这将允许您覆盖样式：
import React, { Component } from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import Paper from "@material-ui/core/Paper";
const styles = () => ({
root: { borderRadius: 20, borderColor: "#000", padding: 50 }
});
export class ExampleComponent extends Component {
render() {
const {classes} = this.props;
return;
<Paper
className={classes.root}
variant="outlined"
square={true}
>
This paper component
</Paper>;
}
}
export default withStyles(styles)(ExampleComponent);如果你有一个主题，只需重写样式，这将首先destructure主题文件和其中的属性，然后将执行(或覆盖)您在此对象中创建的样式：
const styles = theme => ({
...theme,
paper: { borderRadius: 20, borderColor: "#000", padding: 50 }
});对于功能组件：
import React from 'react';
import { styled } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const MyPaper = styled(Paper)({ borderRadius: 20, borderColor: "#000", padding: 50 });
export default function StyledComponents() {
return <MyPaper>Styled Components</MyPaper>;
}或
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
const styles = {
root: { borderRadius: 20, borderColor: "#000", padding: 50 },
};
function AnotherComponent(props) {
const { classes } = props;
return <Paper className={classes.root}>Another component</Paper>;
}
export default withStyles(styles)(AnotherComponent);Stack Overflow用户
发布于 2021-07-23 21:04:31
在Material-UI v5中，您可以很容易地使用sx-属性来更改颜色。您的代码将如下所示：
<Paper sx={{p: '50px', borderRadius: '20px', borderColor: 'green'}} variant="outlined">
Content of Paper Component
</Paper>注意:用于填充和边框半径的如果您不想访问Material-UI主题值，则很可能必须使用px (例如，当使用主题时，padding: 1= padding：'8px‘)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59578952
复制相关文章
相似问题
腾讯云开发者
