gatsbyJSでのスタイル付きコンポーネントの使用

gatsby-plugin-styled-componentsを使用して、以下の要素のスタイルを設定しています。gatsbyJSでのスタイル付きコンポーネントの使用

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;

何らかの理由で私は自分自身を理解できません。私はsecondCharコンポーネントのスタイルを設定できません。色とフォントのサイズはまったく変わりません。しかし、私はChrome Dev ToolでsecondCharをスタイルすることができます。

誰でも何が起こっているのかアドバイスできますか？ありがとうございます。

更新：上記の最初の問題を解決しました。コンポーネントのためにキャメルケースを使用するのを忘れてしまった。

今私は、次の 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> 
)

を実装しようとしていますがTitleWrapperの上にマウスを移動すると、SecondCharコンポーネント上の任意の応答を持っていません。もう一度何かやっているの？

出典

2017-10-19 Jian Hao Tan