How to style className using attrs

[juhaelee]

I'm trying to style a modal component by doing the following:

const StyledModal = styled(Modal).attrs({
  overlayClassName: "modal--overlay",
  className: "modal--content",
})`
  .modal--overlay {
    ${tw`fixed inset-0 flex items-center justify-center bg-black bg-opacity-95`}
  }
  .modal--content {
    ${tw`w-11/12 h-auto max-w-3xl`}
  }
`;

The problem is, when twin.macro compiles the css, it adds a hash before the class:

.cpJHUo .modal--content{width:91.666667%;height:auto;max-width:48rem;}

but the hash is not added to the component:

<div class="ReactModal__Overlay ReactModal__Overlay--after-open modal--overlay"><div class="ReactModal__Content ReactModal__Content--after-open sc-bdfBwQ gZXFRr modal--content" tabindex="-1" role="dialog" aria-label="Media modal" aria-modal="true"></div>

Am I doing this correctly or am I missing something?

[ben-rogerson]

There's a few ways to style something like this, but here's how you could set that Modal component up:

const Modal = () => (
  <div>
    <div tw="fixed">Overlay</div>
    <div tw="w-11/12">Content</div>
  </div>
);

[juhaelee]

@ben-rogerson im trying to style http://reactcommunity.org/react-modal/ which uses overlayClassName and className

[ben-rogerson]

Perhaps try a component wrapping:

const StyledModal = () => (
  <div
    css={`
      .modal--overlay {
        ${tw`fixed`}
      }
      .modal--content {
        ${tw`w-11/12`}
      }
    `}
  >
    <Modal overlayClassName="modal--overlay" className="modal--content" />
  </div>
);

[juhaelee]

hm when I do that, I still get a hash before the className:

.kruAnx .modal--content{width:91.666667%;height:auto;max-width:48rem;}

and the compiled modal looks like this:

<div class="ReactModal__Overlay ReactModal__Overlay--after-open modal--overlay">
   <div class="ReactModal__Content ReactModal__Content--after-open modal--content" tabindex="-1" role="dialog" aria-modal="true"></div>
</div>

my original code:

<div
      css={`
        .modal--overlay {
          ${tw`fixed inset-0 flex items-center justify-center bg-black bg-opacity-95`}
        }

        .modal--content {
          ${tw`w-11/12 h-auto max-w-3xl`}
        }
      `}
    >
      <Modal
        isOpen={isOpen}
        onRequestClose={onClose}
        overlayClassName="modal--overlay"
        className="modal--content"
      >
      </Modal>
    </div>

[ben-rogerson]

The hash is normal there - that's how styled-components / emotion etc works.

Were you able to style the modal with that code? It looks like it should be working.
If not, mind adding a demo on CodeSandbox so I can help you a little easier?

You can fork one of these to get started:

Styled Components > React
https://codesandbox.io/s/github/ben-rogerson/twin.examples/tree/master/react-styled-components?file=/src/App.js

Emotion > React
https://codesandbox.io/s/github/ben-rogerson/twin.examples/tree/master/react-emotion?file=/src/App.js

[juhaelee]

@ben-rogerson here is the example forked from the example:

https://codesandbox.io/s/relaxed-haslett-1kz14?file=/src/App.js

You can see that the modal still doesn't include the styles

[ben-rogerson]

We have a bit of a weird case here as we're trying to style a modal that's rendering within a portal.
So we'll need to use global styles here to style just these couple of elements.

Here's a demo on how you can style the modal with global styles

For the styling of the actual modal content, you shouldn't have any problems styling them like normal 👍

[juhaelee]

awesome tgank you!