如何在创建react.js组件时设置其样式

Question

如何在创建react.js组件时设置样式？

下面是我的一些代码(部分继承自一位更强大的开发人员，然后为了简洁起见进行了简化(。

我想重复使用我的LogComponent来打印几页日志。然而，在某些情况下，我希望在返回的List上强制使用特定的宽度，而不是允许它根据自己的意愿进行调整。

我宁愿不定义一个单独的LogComponentFixed，或者在我的LogComponent中有一个if (...) {return (...)} else {return(...)}。

我想在Log.js中做一些事情，比如：

<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_1} />
<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_2} />

然后，在LogComponent中做一些类似的事情：

<List style={style}> ... </List>

我也试过用之类的东西

<List className={list_1}> ... </List>

但我试过的东西都不管用。。。

Log.js

import React from 'react'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import LogComponent from './LogComponent'
const styles = theme => ({
title: {
padding: theme.spacing.unit*1.5,
},
list_1: {
},
list_2: {
width: "300px"
},
listContainer: {
flexGrow: 1,
minHeight: 0,
overflow: 'auto'
},
})
const Log = ({classes, log}) => {
const page_1 = log[0];
const page_2 = log[1];
return (
<div>
<Typography className={classes.title} color="textSecondary" key={1}>
Example Log
</Typography>
<div className={classes.listContainer} key={2}>
<LogComponent heading={'Page 1'} lines={page_1} />
<LogComponent heading={'Page 2'} lines={page_2} />
</div>
</div>
export default withStyles(styles)(Log)

LogComponent.js

import React from 'react'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import { List, ListItem, ListItemText } from '@material-ui/core';
const styles = theme => ({
title: {
padding: theme.spacing.unit*1.5,
},
}
const LogComponent = ({classes, list_class, heading, lines}) => {
return (
<div className={classes.root}>
<Typography className={classes.title} color="textSecondary" key={1}>
{heading}
</Typography>
<div>
<List dense>
{[...lines[0]].map(e => 
<ListItem><ListItemText primary={e} /></ListItem>
)}
</List>
</div>                    
</div>
)
}
export default withStyles(styles)(LogComponent)

Answer 1

在这里，您将样式作为prop发送到LogComponent，这就是为什么它不会作为样式应用于您创建的组件。style属性用于HTML标记，在material ui中，您还可以将样式传递给包装器组件。

在您的情况下，您可以在LogComponent中获得以下样式：

发送样式作为道具，正如你在问题中提到的那样

<LogComponent heading={"Page 1"}, lines={page_1}, style={styles.list_1} />

现在，你可以从道具、访问它

// right below get the style
const LogComponent = ({classes, list_class, heading, lines, style}) => {
return (
<div className={classes.root} style={style}> // Look style attribute added, style(value) is from props
<Typography className={classes.title} color="textSecondary" key={1}>
{heading}
</Typography>
<div>
<List dense>
{[...lines[0]].map(e => 
<ListItem><ListItemText primary={e} /></ListItem>
)}
</List>
</div>                    
</div>
)
}