Extending styles with styled components

[chinthy217]

Hi,

Great work publishing this library. I'm really enjoying it. But I have a problem extending the styles when using it another component.

I have created a wrapper component for the Modal

• Modal (index.js)

• Room Details Modal (index.js)

But this doesn't seem to work. Any Solution?

Cheers,

[lgaspari]

Hi @chinthy217,

I've been trying to do the same as you did, but unfortunately it seems that the only wat to extend styles is by using the Modal.styled(...) method, which breaks with the styled-component pattern of extending styles. It may be due to the Modal's type which is a React.Component instead of a AnyStyledComponent. I tried a few workarounds but none of them seem to work as expected.

@AlexanderRichey could you please take a look to this issue?

[AlexanderRichey]

Let me see if I can find some time to look into this. I don't see an obvious way of achieving the desired behavior, given the way things are implemented right now.

One solution you might consider in the meantime is to simply nest your own styles inside a bare <Modal />. For example:

import Modal from "styled-react-modal"
...

const ModalStyles = styled(MyBaseStyles)`
  width: 100%;
  ...
`

const MyModal = ({ children, isOpen }) => (
  <Modal isOpen={isOpen}>
    <ModalStyles>
      {children}
    </ModalStyles>
  </Modal>
)

You would then have to import two things, MyBaseStyles and <Modal />, which isn't great, but I think this would allow you to extend styles in the way you would like.

Finally, one other thing worth considering that might help you out here is styled-system. It's not right for everyone, but I've had a good experience with it.

[lgaspari]

Hi @AlexanderRichey, sorry for the late reply, I've been working on another feature so I just came back to this issue.

I took the exact same approach you described above, but instead of creating a reusable MyModal component, I'm importing both things in all my modals to allow me tweak the ModalStyles on each case. I'm kind of new into styled-components, so I might find a way to improve the code later in the future. Anyways, it worked like a charm :)

Thanks man, I appreciate your time in helping us out ♥!

---

@chinthy217 did the code above helped you? Let us know!

[hieu-lai]

Just building on @AlexanderRichey example, you can try something like this...

import Modal from "styled-react-modal"
import styled from "styled-components"

const BaseStyles = styled.div`
  width: 100%;
  ...
`

export const MyModal = ({ children, className, ...rest }) => (
  <ReactModal {...rest}>
    <BaseStyles className={className}>{children}</BaseStyles >
  </ReactModal>
)

You can import <MyModal /> or extend it const StyledModal = styled(MyModal)

[CamilleHbp]

Finally, one other thing worth considering that might help you out here is styled-system. It's not right for everyone, but I've had a good experience with it.

Hello ! I'm trying to use your modal with Theme UI. Since you are mentioning styled-system, I thought I would be able to style your component with sx, but it doesn't seem to work.

Am I doing it wrong, or is it something that is not possible? Thank you for your attention! 🙏