React + Styled Components: Am I supposed to avoid CSS files altogether?

Question

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'm curious about the solution to this as well. Have you figured it out? — Chase DeAnda, Mar 08 '18 at 15:16
Nope still waiting for an answer / some guidance... not sure what to do — bigpotato, Mar 08 '18 at 15:47

bigpotato · Answer 1 · 2018-03-08T17:17:58.400

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.

@ChaseDeAnda just added an example of something I just did, check it out ^ — bigpotato, Mar 08 '18 at 17:18

React + Styled Components: Am I supposed to avoid CSS files altogether?

1 Answers1

Linked