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

Question

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

Below is some of my code (partially inherited from a stronger developer and then simplified for brevity).

I want to re-use my LogComponent to print several pages of a Log. However, in some cases I want to force a particular width on the returned List, rather than allowing it to flex as it sees fit.

I would prefer to not define a separate LogComponentFixed or to have an if (...) {return (...)} else {return(...)} in my LogComponent.

I have in mind to do something in Log.js like:

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

And to then, in LogComponent do something like:

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

I also tried using something like

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

But none of the things I've tried works...

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

Here you are sending the styles as a prop to LogComponent , that's why it will not be applied as styles to that component you have created. The style attribute is for HTML tags and in material-ui, you can pass styles to a wrapper component also.

In your case you can get the styles inside your LogComponent as below:

Send styles as a prop as you mentioned in the question

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

Now, you can access it from props,

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