0
我使用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開發工具設計secondChar風格。
任何人都可以建議發生了什麼? 謝謝。
更新: 解決了上述第一個問題。忘記將camelcase用於組件。
我正努力實現下列 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組件上任何迴應。我又做錯了什麼?