如何从Material-ui React更改Paper组件的borderColor？

Question

我正在使用与material-ui反应，在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);

如果您有主题，只需重写样式，这将首先解构主题文件及其中的属性，然后将执行（或覆盖）您在此对象中创建的样式：

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