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

Question

Im trying to define a class inside my .js file, so i can make use of material-uis theme object and pass it as a string to a component as the components prop only accepts strings. The React-Dropzone import only accepts a string as a parameter and not a class object.

codesandbox:

https://codesandbox.io/s/x74qvqxww4

or:

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

How can i achieve it? Importing a .css file works but then the styles in my projects arent consistent.

Thanks for any help in advance!

Answer 1

All you would need to do is to declare the class like so:

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