樣式化組件中的樣式化反應組件

Question

我對樣式組件有疑問，我想知道如何從他們的父母那里獲得 position 元素，我看到有以下選項，但我不喜歡任何選項。

• 通過 props，我不喜歡這種方法，因為我認為這種方法的可維護性很糟糕，因為在復雜的情況下我們會有很多 props。
• 通過 className，通常在樣式化的組件中我們沒有 class，因為我們創建了 styled.div，例如，我喜歡在我的結構中保持一致，我不想在某些而不是在其他中有 class 名稱。

在這種情況下 CurrentFinderLocationButton 是一個反應組件，你會如何 position 他們？ 有沒有辦法 select 它並從 StyledHome 應用 styles 沒有類名或道具？

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;

Answer 1

你可以在包裝器中添加一些 styles

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

Answer 2

最后我解決了這個問題，通過道具綁定組件 class 和樣式組件 class 。

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;