Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

emotion

Emotion is a css-in-js library focused on performance and developer experience

emotion / General

How to convert styles for use in a `style={{ ... }}` prop?

How to convert styles for use in a `style={{ ... }}` prop?

emotion/General · January 24, 2019 at 5:23pm

How to convert styles for use in a `style={{ ... }}` prop?

emotion / General · January 24, 2019 at 5:23pm

I'm using react-modal (http://reactcommunity.org/react-modal/styles/) and it expects styles that look like backgroundColor: 'red'

Does Emotion support this?

I tried:

<ReactModal
style={{
content: css`
background: red;
`
}}
/>

..to no avail.

Thank you.


January 25, 2019 at 1:09am

If it accepts a className, you can use props. https://emotion.sh/docs/class-names

  • reply
  • like

January 25, 2019 at 4:35am

Didn't know I could styled(ReactModal). This works:

import ReactModal from 'react-modal';
import styled from '@emotion/styled'
const S = styled(ReactModal)`
background: red;
> h1 {
color: blue;
}
`
ReactModal.setAppElement('#root');
const LoginModal = ({ isOpen }) => (
<S
isOpen={true}
bodyOpenClassName="react-modal-disable-scroll"
htmlOpenClassName="react-modal-disable-scroll"
>
<h1>Mmmodal</h1>
</S>
)
export default LoginModal
Edited
like-fill
1
  • reply
  • like