Extending styles with styled-components not working

Question

I'm trying to extend styles for a react component using styled-components but is not working. AFAIK, I'm doing it the right way, but perhaps I'm missing something... Here is what I have:

import React from "react";
import styled from "styled-components";

const TextContainer = ({ text }) => {
  return <p dangerouslySetInnerHTML={{ __html: text }} />;
};

const Paragraph = styled(TextContainer)`
  background: red;
`;

class Home extends React.Component {
  render() {
    const { t } = this.props;
    return <Paragraph text="This is a test" />;
  }
}

export default Home;

Of course, the expected result is to have a red background on p, but right now the output looks like this:

Any idea on how to solve this? Probably I'm missing something, but I can't realize what.

Thanks is advance!

I believe you are getting two things confused. Extending, according to the docs, is when you have a styled component and you create a new one based on that. On the other hand when styling your own components, you will need to pass the class name as someone has answered below. Otherwise styled-components would not know which DOM element to apply the styles to :) — ViggoV, Jan 09 '19 at 15:36

score 109 · Accepted Answer · edited Aug 09 '20 at 00:18

109

As stated in documentation:

The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.

Example

// This could be react-router-dom's Link for example, or any custom component
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

Ref: https://www.styled-components.com/docs/basics#styling-any-component

edited Aug 09 '20 at 00:18

Tad Venture

13
3

answered Jan 09 '19 at 15:30

Mosè Raguzzini

15,399
1
31
43

@SeanMC Your claim is not true. I've created a component which is in a completely different file and I could successfully apply the 'styled' method on it outside of its own component. The only thing that I've had to do was that I needed to pass the 'ClassName' as prop and attached it to the main container (div). – Crepkey Jan 21 '22 at 10:05
passing className doesn't seem to be working for me. I am passing in the innermost child where styled component is being used to override the base styles of a component. Am I doing it incorrectly? Does className have to be prop drilled from parent to every other child? – Aakash Thakur Dec 25 '22 at 16:51
The problem I'm hitting hard now is, props passing into `StyledLink` somehow get lost and `` is not getting it. I did `` props did not get `theme` in its props, super weird. – Shawn Jan 14 '23 at 03:08

score -2 · Answer 2 · answered Jan 09 '19 at 16:57

I didn't know that was a way to do it. I would do:

    const Link = styled.a`
    ..put you css styles here (className styles)
   `

   const StyledLink = styled(Link) `
      color: palevioletred;
      font-weight: bold;
   `

render(){
return(
<div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)
}

Extending styles with styled-components not working

2 Answers2

Linked