尝试直接使用 styled-components 设置组件样式时出错

Question

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.

Answer 1

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 describehow 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.