Question

我有一个很大的“主页”组件，它由很多样式组件组成。到目前为止一切都很好。

然而，我现在注意到我需要一些简单的div，只需要他们的位置样式。我的问题是：我是否需要为这些div制作组件？我需要的唯一属性是position: relative;。

    <div> <------ I need this to have position: relative, How?
      <Countdown> <------  I need this to have top: -150px, which I did using styled-components.
        <Text>COUNTDOWN</Text>
      </Countdown>
    </div>

所以我认为样式组件的想法是完全避免classNames？在这种情况下我该怎么办？如果我不得不用绝对的一切来制作一个组件，那就好像是组件矫枉过正。

此外，我不知道top: -150px是否属于倒计时...将定位样式作为组件的默认样式的一部分很奇怪，因为这样可以减少重复使用。

Answer 1

我在github页面上问过，显然我应该为布局做一个新的组件，即使它是一次性的。 https://github.com/styled-components/styled-components/issues/1588

只需将其设为本地组件，不要将其导出。

这是一个例子。

import React from "react";
import styled from "styled-components";
import IMAGES from "assets/images";
import Step from "views/homepage/step";

const Wrapper = styled.div`
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 10%;
  height: 350px;
`;

const Icon = styled.img.attrs({
  src: props => props.src
})`
  width: 130px;
`;

const Arrow = styled.img.attrs({
  src: props => props.src
})`
  width: 20%;
  margin-bottom: 100px;
`;

const Title = styled.p`
  color: #3b24c2;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
`;

const Description = styled.p`
  color: black;
  font-size: 13px;
  text-align: center;
`;

const Instructions = () => (
  <Wrapper>
    <Step>
      <Icon src={IMAGES.HOW_IT_WORKS_1} />
      <Title>STEP 1: CREATE ACCOUNT</Title>
      <Description>
        Plusieurs variations de Lorem Ipsum peuvent être trouvées ici
      </Description>
    </Step>
    <Arrow src={IMAGES.HOW_IT_WORKS_ARROW_1} />
    <Step>
      <Icon src={IMAGES.HOW_IT_WORKS_2} />
      <Title>STEP 2: DESIGN PAGE</Title>
      <Description>
        Plusieurs variations de Lorem Ipsum peuvent être trouvées ici
      </Description>
    </Step>
    <Arrow src={IMAGES.HOW_IT_WORKS_ARROW_2} />
    <Step>
      <Icon src={IMAGES.HOW_IT_WORKS_3} />
      <Title>STEP 3: PUBLISH PAGE</Title>
      <Description>
        Plusieurs variations de Lorem Ipsum peuvent être trouvées ici
      </Description>
    </Step>
  </Wrapper>
);

export default Instructions;

因此，如果我们在这个例子中没有使用样式组件，我基本上必须在CSS文件和在一堆元素上添加classNames之间来回切换。这样更清洁，开始明白为什么它如此受欢迎。

React + Styled Components：我应该完全避免使用CSS文件吗？

1 个答案: