我已经将一个函数转换为一个类组件,现在我不能再使用makeStyles来样式化我的组件。我试着用withStyles代替,但我没有太大的成功。我已经包含了我的代码:
import React from 'react';
import {withStyles} from '@material-ui/styles'
import {db} from '../firebase.js'
import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionActions from '@material-ui/core/AccordionActions';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Divider from '@material-ui/core/Divider';
import Button from '@material-ui/core/Button';
import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
//old
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3)
},
accordion: {
margin: '-1px 0'
},
heading: {
fontSize: theme.typography.pxToRem(14),
flexBasis: '66.66%',
flexShrink: 0
},
secondaryHeading: {
fontSize: theme.typography.pxToRem(14),
color: theme.palette.text.secondary,
},
eventDetailsBox: {
marginBottom: theme.spacing(3)
}
}))
//new
const styles = theme => ({
root: {
width: '100%',
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3)
},
accordion: {
margin: '-1px 0'
},
heading: {
fontSize: theme.typography.pxToRem(14),
flexBasis: '66.66%',
flexShrink: 0
},
secondaryHeading: {
fontSize: theme.typography.pxToRem(14),
color: theme.palette.text.secondary,
},
eventDetailsBox: {
marginBottom: theme.spacing(3)
}
})
let eventData = [];
const eventDataRef = db.ref('/events')
eventDataRef.on('value', snapshot => {eventData = snapshot.val()})
class EventAccordions extends React.Component {
constructor(props) {
super(props)
this.state = {
expanded: false
}
this.handleChange = this.handleChange.bind(this)
}
handleChange = panel => (_, isExpanded) => {
this.setState({expanded: isExpanded ? panel : false})
}
render() {
const {classes} = this.props //undefined
return (
<div className={classes.root}>
{eventData.map(event => {
return (
<Accordion
key={event.uid}
onChange={this.handleChange(event.uid)}
expanded={this.state.expanded === event.uid}
TransitionProps={{unmountOnExit: true}}
className={classes.accordion}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${event.uid}-content`}
id={`${event.uid}-header`}
>
<Typography className={classes.heading}>{event.name}</Typography>
<Typography className={classes.secondaryHeading}>{event.humanDate}</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>stuff</Typography>
</AccordionDetails>
<Divider />
<AccordionActions>
<Button>Cancel</Button>
<Button color="primary">
Save
</Button>
</AccordionActions>
</Accordion>
)
})}
</div>
)
}
}
export default withStyles(styles)(function ViewEventsPage() {
return (
<div>
<EventAccordions />
</div>
)
})
我在这里粘贴了我的旧代码
如何样式化类中的组件(和子组件)?
另外,style里面的"theme"现在是未定义的,所以我如何使用theme.typography。pxToRem,主题。间距等?
谢谢
尝试用withStyles
包装您的<EventAccordions />
组件。在您当前的代码中,您实际上包装了<ViewEventsPage >
组件,因此<EventAccordions />
从未接收到任何样式。
理想情况下,您希望为<ViewEventsPage />
创建一个单独的文件(以组织您的代码),并且可以在那里导入<EventAccordions />
:
EventAccordions文件:
export default withStyles(styles)(EventAccordions)
ViewEventsPage文件:
import EventAccordions from "./eventAccordions.js" // (replace with your path)
const ViewEventsPage = () => {
return (
<div>
<EventAccordions />
</div>
)
}
export default ViewEventsPage