классы против стилей для CSS className в Reactjs - PullRequest
Новая
       12

классы против стилей для CSS className в Reactjs

0 голосов
/ 07 сентября 2018

В приведенном ниже коде почему работает вызов объекта classes? Похоже, что вызов должен быть для объекта styles, определенного как const вверху.

Например, в этой демонстрации : 

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

1 Ответ

0 голосов
/ 07 сентября 2018

Если вы посмотрите на эту строку: 

export default withStyles(styles)(OutlinedButtons);

ответ на ваш вопрос при условии, я верю. Пользовательский интерфейс материала имеет функцию withStyles, которая принимает объект стилей, а затем возвращает другую функцию, которая принимает компонент для возврата нового компонента. Это компонент высшего порядка, о котором можно прочитать в документах React.

Если вы посмотрите на связанный код withStyles, вы увидите следующую строку, где он отображает переданный компонент: 

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

И предоставляет classes реквизит, делая его доступным для любого компонента, экспортируемого с withStyles.

...