在下面的代码中,为什么调用classes
对象有效?似乎调用应该是定义为styles
顶部的const
对象。
例如,in this demo:
className={classes.button}
像书面一样工作。但它似乎应该是
className={styles.button}
在任何地方都定义了任何实际的classes
对象吗?如果是这样,它在哪里定义?标记意味着this.props.classes
对象。但是当在index.js中调用时,没有props
传递给<Demo />
。
这里发生了什么?
https://codesandbox.io/s/qxv466wlqimport 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);
如果你看这一行:
export default withStyles(styles)(OutlinedButtons);
我相信你提出的问题的答案。 Material UI有一个函数withStyles
,它接受一个样式对象,然后返回另一个函数,该函数使一个组件返回一个新组件。这是一个高阶组件,可以在React docs.上阅读
如果你查看withStyles
的链接代码,你可以看到它呈现传入组件的以下行:
return <Component {...more} classes={this.getClasses()} ref={innerRef} />;
并提供classes
道具,使其可用于withStyles
出口的任何组件。