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)

Answer 2

如果要将对象作为样式传递给组件，则只需要使用style属性，而不是将其用作类

<Component style={this.styleObject} />

Answer 3

Spread operators的ES似乎对我来说是一种更清洁的方法。

const layoutHeader = {
  ...
}
const showStyle = {
  background: 'red'
}
const combo = { ...hiddenStyle, ...showStyle }

注意：按键将按序列顺序覆盖（例如，最后一次写入获胜）

如何在ReactJs中组合样式属性

3 个答案: