CODEWITHSUNDEEP
reactjsemotion
Evanss
Evanss

Reputation: 23183

Pass prop to styles for EmotionJS?

How can I have a prop defined by state which I pass to my EmotionJS styles?

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'};

`

I don't really understand this error message:

Interpolating functions in css calls is deprecated and will be removed in the next major version of Emotion. If you want to have a css call based on props, create a function that returns a css call like this let dynamicStyle = (props) => csscolor: ${props.color} It can be called directly with props or interpolated in a styled call like this let SomeComponent = styled('div')${dynamicStyle}

Upvotes: 1

Views: 1104

Answers (2)

Con Antonakos
Con Antonakos

Reputation: 1789

You also try using the css and cx named exports, and pass an object with keys as the name of the class name and values as the prop name like so:

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

Upvotes: 0

Evanss
Evanss

Reputation: 23183

This can be done using the cx function to combine classes: 

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

const menuStyleClosed = css`
  display: none;

`

Upvotes: 1

Related Questions