Question

我对样式化组件有疑问，我想知道如何从他们的父母那里定位元素，我看到有以下选择，但我不喜欢任何选择。

通过道具，我不喜欢这种方法，因为我认为这种方法的可维护性太差了，因为在复杂的情况下，我们将有很多道具。
通过className，通常在样式化的组件中，例如，由于我们创建了styled.div，因此我们没有类，我希望结构保持一致，并且我不想在某些类中拥有类名，而在其他类中却没有类名。

在这种情况下，CurrentFinderLocationButton是一个React组件，您将如何定位它们？有没有办法从ClassdHome中选择它并应用没有className或props的样式？

kubectl

Answer 1

您可以在包装器中添加一些样式

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

Answer 2

最后，我通过道具将组件类和样式化的组件类绑定在一起，解决了这个问题。

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;

在样式化组件中对react组件进行样式设置

2 个答案: