Can you explain why the call to the classes object works in the code below, rather than to the styles object defined as a const at the beginning?
For instance, take a look at this demo:
className={classes.button}
The above line functions correctly. However, it appears that it should actually be:
className={styles.button}
Is there a specific classes object being referenced somewhere? If so, where is it declared? The structure suggests a this.props.classes object, but no props are passed to <Demo /> when invoked in index.js.
Could someone shed some light on this situation?
Click here for the live demoimport 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);