• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error