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

Question

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

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

我想重新使用我的 LogComponent 来打印几页 Log。但是，在某些情况下，我想在返回的 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>

但是 none 我试过的方法都有效...

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

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

How to set the style a react.js component when creating it?

javascript

css

reactjs

material-ui

react-with-styles