Using styled-components with gatsbyJS

Question

i am using gatsby-plugin-styled-components to style the elements below.

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


const secondChar = styled.span`
  font-size: 3em;
  color: azure;
`

const TitleWrapper = styled.div`
  font-size: 3.5em;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-family: 'Covered By Your Grace', cursive;
`

const Title = () => (
  <TitleWrapper>
    <span>a</span>
    <secondChar>b</secondChar>
    <span>c</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
  </TitleWrapper>
)

export default Title;

For some reason i simply cant figure out myself, i am unable to style the secondChar component. Color and font size doesn't change at all. However, i am able to style the secondChar via Chrome Dev Tool.

Anyone can advise what is going on? Thank you.

updates: Solved the first issue above. Forgot to use camelcase for components.

now i am trying to implement the following Styled-components: refering to other components

const SecondChar = styled.span`
  display: inline-block;
  transform: translateX(20px);
  transition: transform 500ms ease-in-out;
  ${TitleWrapper}:hover & {
    color: azure;
  }
`

const TitleWrapper = styled.div`
  font-size: 3.5em;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-family: 'Covered By Your Grace', cursive;
`

const Title = () => (
  <TitleWrapper>
    <span>a</span>
    <SecondChar>b</SecondChar>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
  </TitleWrapper>
)

however hovering over TitleWrapper doesn't have any response on the SecondChar component. am i doing something wrong again?

Answer 1

All component naming should start by capital letter, including styled components, so the secondChar should be SecondChar