React и Material-Ui определяют класс в .js и передают его как строку компоненту

Question

Я пытаюсь определить класс в моем файле .js, чтобы я мог использовать объект темы material-uis и передавать его в виде строки компоненту, поскольку prop компонентов принимает только строки.Импорт React-Dropzone принимает только строку в качестве параметра, а не объект класса.

codesandbox:

https://codesandbox.io/s/x74qvqxww4

или:

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