Styling react component in styled components

0
votes

I have a question with styled components, I would like to know how to position elements from their parents, I saw that there are the following options but I do not like any.

  • Through props, I don't like this method because I consider that the maintainability of this is horrible since in complex cases we will have many props.
  • Through className, generally in styled components we don't have class since we create styled.div for example, I like to have consistency in my structure and I don't want to have class names in some and not in others.

In this case CurrentFinderLocationButton is a react component, how would you position them? Is there a way to select it and apply styles from StyledHome without className or props?

import React from "react";
import styled from "styled-components";

import CurrentLocationFinderButton from "../buttons/CurrentLocationFinderButton";
import fullLogotype from "../../assets/images/full-logotype.svg";

const Home = () => {
  return (
    <StyledHome>
      <StyledLogotype src={fullLogotype} />
      <CurrentLocationFinderButton />
    </StyledHome>
  );
};

const StyledHome = styled.div`

`;

const StyledLogotype = styled.img`
  width: 150px;
  display: block;
  margin: auto;
`;

export default Home;
2
javascripthtmlreactjsstyled-components

2 Answers

1
votes

you can just add some styles to wrapper

const StyledCurrentLocationFinderButton = styled(CurrentLocationFinderButton)`
 {any styles}
`
0
votes

Finally i solved this problem binding the component class and styled components class through the props.

import React from "react";
import styled from "styled-components";
import fullLogotype from "../../assets/images/full-logotype.svg";
import CurrentLocationFinderButton from "../buttons/CurrentLocationFinderButton";
import AddressFinder from "../finders/AddressFinder";

const Logotype = ({ className }) => {
  return <img className={className} alt="" src={fullLogotype} />;
};

const EntryText = ({ className }) => {
  return (
    <p className={className}>
      Atisbalo es una app donde podrás encontrar información sobre tus locales
      favoritos y enterarte de todas las promociones que oferta tu cuidad al
      instante
    </p>
  );
};
const Home = ({ className }) => {
  return (
    <StyledHome className={className}>
      <StyledLogotype />
      <StyleEntryText />
      <StyledCurrentLocationFinderButton />
      <StyledAddressFinder/>
    </StyledHome>
  );
};

const StyledHome = styled.div``;

const StyledLogotype = styled(Logotype)`
  width: 150px;
  display: block;
  margin: auto auto 30px auto;
`;

const StyleEntryText = styled(EntryText)`
  display: block;
  width: 90%;
  text-align: center;
  margin: auto auto 30px auto;
`;

const StyledCurrentLocationFinderButton = styled(CurrentLocationFinderButton)`
  display: block;
  margin: auto auto 30px auto;
`;

const StyledAddressFinder = styled(AddressFinder)`
  width: 80%;
  margin: auto;
`
export default Home;