Question

我正在尝试在.js文件中定义一个类，因此我可以利用material-uis主题对象，并将其作为字符串传递给组件，因为components prop只接受字符串。 React-Dropzone导入仅接受字符串作为参数，而不接受类对象。

codesandbox：

或：

import React, { Fragment } from "react";
import Dropzone from "react-dropzone";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  green: {
    color: "blue"
  }
});

function CustomDropzone(props) {
  return (
    <Fragment>
      <Dropzone acceptClassName="dropzoneAccept" />
      <div className={props.classes.green}>
        Thats how i appy styles normally
      </div>
    </Fragment>
  );
}

export default withStyles(styles, { withTheme: true })(CustomDropzone);

我该如何实现？导入.css文件是可行的，但随后我的项目中的样式将保持一致。

感谢您的任何帮助！

Answer 1

您需要做的就是像这样声明该类：

import React, { Fragment } from "react";
import Dropzone from "react-dropzone";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  green: {
    color: "blue"
  }
});

class CustomDropzone extends React.Component {
  render() {
    return (
      <Fragment>
        <Dropzone acceptClassName="dropzoneAccept" />
        <div className={this.props.classes.green}>
          Thats how i appy styles normally
        </div>
      </Fragment>
    );
  }
}

export default withStyles(styles, { withTheme: true })(CustomDropzone);

React和Material-Ui在.js中定义类，并将其作为字符串传递给组件

1 个答案: