CODEWITHSUNDEEP
reactjssassstyled-components
Casey
Casey

Reputation: 552

Styled Component only applying style to nested selector

I want all of my text to be weight 800, including a span with the className of txt-rotate. Additionally, the child span will be colored and underlined. To do this, I am using this styled component definition:

export const Slider = styled.h2`
  font-weight: 800;
  .txt-rotate {
    color: ${(props) => props.theme.primaryColor};
    text-decoration: underline;
  }
`;

And then this is when I use the component:

<Slider>I'm a&nbsp;
    <span className="txt-rotate" 
          data-period={2000} 
          data-rotate='[ "Hacker.", "Coder.", "Maker.", "Entrepreneur." ]' />
</Slider>

The span's text ends up being the primaryColor and the text is underlined, but none of the text is weighted. In the inspector, I see that there is no style being applied to the Slider's div except for the span within it.

Update: I fixed my problem by reordering the exports of my styled components. The styled component Slider was at the bottom, and now it works as the second to last styled component definition. Why would this be?

Upvotes: 1

Views: 365

Answers (1)

Harihar Das
Harihar Das

Reputation: 494

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

Please refer to https://css-tricks.com/almanac/properties/f/font-weight/

const Slider = window.styled.h2`
  font-weight: ${props => props.weight};
  background: ${props => props.background};
  .txt-rotate {
    text-decoration: underline;
  }
`;
const App = () => (
 <div>
  <Slider weight="100" background="grey">
    One <span className="txt-rotate">I am a span (100)</span>
  </Slider>
  <Slider weight="200" background="green">
    Two <span className="txt-rotate">I am a span (200)</span>
  </Slider>
  <Slider weight="300" background="cyan">
    Three <span className="txt-rotate">I am a span (300)</span>
  </Slider>
  <Slider weight="400">
    Four <span className="txt-rotate">I am a span (400)</span>
  </Slider>
  <Slider weight="500">
    Five <span className="txt-rotate">I am a span (500)</span>
  </Slider>
  <Slider weight="600">
    Six <span className="txt-rotate">I am a span (600)</span>
  </Slider>
  <Slider weight="700">
    Seven <span className="txt-rotate">I am a span (700)</span>
  </Slider>
  <Slider weight="800">
    Eight <span className="txt-rotate">I am a span (800)</span>
  </Slider>
  <Slider weight="900">
    Nine <span className="txt-rotate">I am a span (900)</span>
  </Slider>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.1/styled-components.min.js"></script>

<div id="root"></div>

Upvotes: 1

Related Questions