reactjs - 如何从 material-ui react 中更改 Paper 组件的边框颜色？

Question

我正在使用与 material-ui 的 react ，在 material-ui 中，我尝试使用 Paper 组件进行一些自定义，例如将 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 属性不起作用，

有什么建议？

Answer 1

与 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);