React + Styled Components:我应该完全避免使用 CSS 文件吗? [英] React + Styled Components: Am I supposed to avoid CSS files altogether?

问题描述

我有一个很大的主页"组件，它由许多样式组件组成.到目前为止一切顺利.

然而，我现在注意到我需要一些简单的 div，它们只需要它们的位置样式.我的问题是:我需要为那些 div 制作组件吗?我需要的唯一属性是position:relative;.

 
<------ 我需要这个有位置:相对，怎么样?<倒计时><------ 我需要它有顶部:-150px，我使用样式组件做的.<文本>倒计时</文本></倒计时>

所以我认为样式组件的想法是完全避免类名?在这种情况下我该怎么办?如果我必须用绝对所有的东西来制作一个组件，感觉就像是组件矫枉过正.

另外，我不知道 top: -150px 是否属于 Countdown ... 将定位样式作为组件默认样式的一部分很奇怪，因为这使它变得很多不太容易重复使用.

解决方案

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

只需将其设置为组件本地，不要导出它.

这是一个例子.

从react"导入React；从样式组件"导入样式；从资产/图像"导入图像；从视图/主页/步骤"导入步骤；const Wrapper = styled.div`显示:弹性；justify-content: 空间环绕；对齐项目:居中；填充:0 10%；高度:350px；`;const Icon = styled.img.attrs({src: 道具 =>道具.src})`宽度:130px；`;const Arrow = styled.img.attrs({src: 道具 =>道具.src})`宽度:20%；底边距:100px；`;const 标题 = styled.p`颜色:#3b24c2；字体大小:13px；字体粗细:粗体；文本对齐:居中；`;const 描述 = styled.p`颜色:黑色;字体大小:13px；文本对齐:居中；`;const 指令 = () =>(<包装器><步骤><图标 src={IMAGES.HOW_IT_WORKS_1}/><Title>第 1 步:创建帐户</Title><说明>Plusieurs changes de Lorem Ipsum peuvent être trouvées ici</描述></步骤><箭头 src={IMAGES.HOW_IT_WORKS_ARROW_1}/><步骤><图标 src={IMAGES.HOW_IT_WORKS_2}/><Title>第 2 步:设计页面</Title><说明>Plusieurs changes de Lorem Ipsum peuvent être trouvées ici</描述></步骤><箭头源={IMAGES.HOW_IT_WORKS_ARROW_2}/><步骤><图标 src={IMAGES.HOW_IT_WORKS_3}/><标题>步骤 3:发布页面</标题><说明>Plusieurs changes de Lorem Ipsum peuvent être trouvées ici</描述></步骤></包装器>);导出默认指令；

因此，如果我们在本示例中不使用样式组件，我基本上将不得不在 CSS 文件 + 在一堆元素上添加 className 之间来回切换.这样更简洁，开始理解为什么它如此受欢迎.

I have a large "Homepage" component that is made up of a lot of styled-components. So far so good.

However, I now notice that I need a few plain divs that just need styles for their position. My question is: Do I need to make components for those divs? The only property I need is something like 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>

So I thought the idea of styled-components was to avoid classNames altogether? What do I do in a situation like this? It feels like it would be component overkill if I had to make a component out of absolutely everything.

Also, I don't know if top: -150px belongs in Countdown... It's weird to have positioning styles as part of the default styling of a component, since that makes it a lot less reusable.

解决方案

I asked on the github page, and apparently I should be making a new component for layouting even if it's a one-off. https://github.com/styled-components/styled-components/issues/1588

Just make it local to the component and don't export it.

Here's an example.

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;

So if we didn't use styled-components in this example, I would basically have to go back and forth between a CSS file + adding classNames on a bunch of elements. This is way cleaner, starting to understand why it's so popular.

这篇关于React + Styled Components:我应该完全避免使用 CSS 文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！