javascript - 如何在 ReactJs 中组合样式属性

Question

我有这个代码:

const styles = theme => (
  console.log('theme',theme), {

    layoutHeader : {
      height: 320,
      minHeight: 320,
      background: "url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat",
      backgroundSize: 'cover',
      color: '#fff',
      [theme.breakpoints.down('md')]: {
        height: 240,
        minHeight: 240
      }
    }
  }
);

class ProfilePage extends Component {
  render() {
    const {classes} = this.props;
    return (
      <PageSimple
        classes={{header : classes.layoutHeader}}
    )
  }
}

我想在页面加载后更改背景。

我该怎么做，例如这样的事情:

const newStyle = styles([
  classes.layoutHeader,
  {background: this.props.backgroundimageurl}
]);

classes={{ header : newStyle }}

这可能吗？我试过了，但没用，你能帮忙吗？

Answer 1

我认为您正在寻找类似 Object.assign 的东西。这里有一个 JSX 的小例子:

const layoutHeader = {
  ...
}
const showStyle = {
  background: 'red'
}
const bineStyle = Object.assign(layoutHeader,showStyle)