在 gatsbyJS 中使用样式组件

Question

我正在使用 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 的样式。

谁能告诉我这是怎么回事？谢谢。

更新：解决了上面的第一个问题。忘记为组件使用驼峰命名法。

现在我正在尝试执行以下操作 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 组件没有任何响应。我是不是又做错了什么？

Answer 1

所有组件命名应以大写字母开头，包括样式组件，因此 secondChar 应为 SecondChar

在 gatsbyJS 中使用样式组件

Using styled-components with gatsbyJS

css

reactjs

server-side-rendering

gatsby

styled-components