reactjs - 将道具传递给 EmotionJS 的样式？

Question

我怎样才能有一个由我传递给我的 EmotionJS 样式的状态定义的道具？

class MyComponent extends React.Component {
  state = {
    menuOpen: true,
  }
  render() {
    return (
      <menu className={menuStyle} menuopen={this.state.menuOpen ? 'true' : undefined }>
    )
  }

const menuStyle = css`
  display: ${menuopen ? 'block' : 'none'};

`

我真的不明白这个错误信息：

css 调用中的插值函数已被弃用，并将在 Emotion 的下一个主要版本中删除。如果你想有一个基于 props 的 css 调用，创建一个返回 css 调用的函数，像这样 let dynamicStyle = (props) => csscolor: ${props.color}可以直接用 props 调用，也可以像这样插入到样式化调用中 let SomeComponent = styled ('div')${dynamicStyle}

Answer 1

这可以使用 cx 函数来组合类来完成：

class MyComponent extends React.Component {
  state = {
    menuOpen: true,
  }
  render() {
    return (
      <menu className={this.state.menuOpen ? menuStyle : cx(menuStyle, menuStyleClosed)}>
    )
  }

const menuStyleClosed = css`
  display: none;

`

Answer 2

您还尝试使用css和cx命名的导出，并传递一个带有键作为类名的名称和值作为道具名称的对象，如下所示：

import { css, cx } from 'emotion';

const menuStyleOpen = css
  display: 'block';
`;

class MyComponent extends React.Component {
  state = {
    menuOpen: true,
  };

  render() {
    return (
      <menu
        className={cx({
          [menuStyleOpen]: menuOpen,
        })}
      />
    );
  }
}