我正在使用 gatsby-plugin-styled-components 来设置以下元素的样式。
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 的样式。
任何人都可以建议发生了什么?谢谢你。
更新:解决了上面的第一个问题。忘记使用驼峰式作为组件。
现在我正在尝试实现以下 样式组件:引用其他组件
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 组件没有任何响应。我又做错了什么?