CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
Artur Alcoverro Pastó
Artur Alcoverro Pastó

Reputation: 1

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.

Upvotes: 0

Views: 948

Answers (1)

Emre
Emre

Reputation: 61

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.

Upvotes: 1

Related Questions