Reactjs 中 CSS className 的类与样式答案

【问题标题】：classes vs styles for CSS className in ReactjsReactjs 中 CSS className 的类与样式
【发布时间】：2019-02-12 06:59:58
【问题描述】：

在下面的代码中，为什么调用classes 对象有效？似乎调用应该是对定义为 const 顶部的 styles 对象。

例如in this demo:

className={classes.button}

按书面方式工作。不过好像应该是这样的

className={styles.button}

是否在任何地方定义了任何实际的classes 对象？如果是这样，它在哪里定义？该标记暗示了一个this.props.classes 对象。但是在 index.js 中调用时没有 props 传递给 <Demo />。

这是怎么回事？

https://codesandbox.io/s/qxv466wlq

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function OutlinedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button variant="outlined" className={classes.button}>
        Default
      </Button>
      <Button variant="outlined" color="primary" className={classes.button}>
        Primary
      </Button>
      <Button variant="outlined" color="secondary" className={classes.button}>
        Secondary
      </Button>
      <Button variant="outlined" disabled className={classes.button}>
        Disabled
      </Button>
      <Button variant="outlined" href="#outlined-buttons" className={classes.button}>
        Link
      </Button>
      <input
        accept="image/*"
        className={classes.input}
        id="outlined-button-file"
        multiple
        type="file"
      />
      <label htmlFor="outlined-button-file">
        <Button variant="outlined" component="span" className={classes.button}>
          Upload
        </Button>
      </label>
    </div>
  );
}

OutlinedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedButtons);

【问题讨论】：

标签： javascript css reactjs class material-ui

【解决方案1】：

如果你看这一行：

export default withStyles(styles)(OutlinedButtons);

我相信您的问题的答案已提供。 Material UI 有一个函数withStyles，它接受一个样式对象，然后返回另一个函数，该函数接受一个组件返回一个新组件。这是一个高阶组件，可以在 React docs.

上阅读

如果你查看withStyles的链接代码，你可以看到下面一行渲染传入的组件：

return <Component {...more} classes={this.getClasses()} ref={innerRef} />;

并且正在提供classes 属性，使其可用于使用withStyles 导出的任何组件。

【讨论】：