Question

0

54

Views

Error trying to style a component directly with styled-components

I'm trying to style a component like this:

function _MenuItem({label, icon}){
    return <div>
        {icon}
        <p>{label}</p>
    </div>
}

export const MenuItem = styled(props => <_MenuItem {...props} />)`
    color: red;
    p{color: red}
    *{color: red}
`

The component is rendering, but the styles are not being applied.

I have managed to apply the styles by making a styled div and creating the component from that div, but I was wondering if there is a way to apply the styles directly to the component?

I am very new with react and more with styled-components so I assume that I have misunderstood some basic concepts.

5 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T05:48:36.646Z

Making a styled div is the correct way of doing things. I couldn't find anything on styling a component directly nor felt the urge to done it before.

Even when the styled-component docs describe how to style any component, they are basically styling an element just with a different syntax.

There doesn't seem to be a good enough reason to do what you want to do, since you can achieve what you want to achieve by using the styled components as intended.

The following way of doing things works and it is super simple:

import styled from "styled-components"

const _MenuItem = ({label, icon}) => {
    return <Root>
        {icon}
        <p>{label}</p>
    </Root>
}

const Root = styled.div`
    color: red;
    p{color: red}
    *{color: red}
`

export default _MenuItem;

Please let me know if I'm missing some specific use-case or something other.