在“分子”中将样式组件“原子”嵌套在一起 -> 样式/定位

Question

我需要创建一个 React 组件库

为此，我将 React 与 Typescript 和样式组件一起使用。

当我尝试在分子中重用我的原子时，我被卡住了......

我像这样创建我的 Button Atom 组件：

interface IButtonProps {

    text?: string

    onClick?: React.MouseEventHandler<HTMLButtonElement>

}

const StyledButton = styled.button<IButtonProps>`

  height: 70px;

  width: 70px;

  border: none;

  border-radius: 5px;

  background-color: #88BDBC;

  color: #254E58;

  font-family: Alata, sans-serif;

  font-size: 35px;

  transition: all 350ms;

  &:hover {

    background-color: #254E58;

    color: #88BDBC;

  }

  &:active {

    background-color: #112D32;

    color: #88BDBC;

  }

`;

const Button = ({

   text = "",

   onClick

}: IButtonProps): React.ReactElement => {

    return (

        <StyledButton onClick={onClick}>{text}</StyledButton>

    );

};

这只是我的 Atoms 的一个非常不完美的示例。我像这样创建所有原子。我只在 Atoms -> Colors、Borders、Margins 等中定义样式。不是外面的样式-> 例如填充然后我认为它很大程度上取决于使用此按钮的上下文。

所以我很封装。

当我想在例如“控制器”分子中使用按钮时，我需要给那个按钮一些位置，也许还有一些填充等。

但是在我的父样式组件中，我现在不知道如何正确指向它们。尤其是当我有像这里这样更大的组件组合时。

interface IControllerProps {

    text1: string;

    text2: string;

    text3: string;

    onClick?: React.MouseEventHandler<HTMLButtonElement>

}

const StyledController = styled.div<IControllerProps>`

  /* ... */

`;

const Controller = ({

    onClick

}: IControllerProps) => {

    const [powerOn, setPowerOn] = React.useState(false);

    const [bankType, setBankType] = React.useState(false);

    const [volume, setVolume] = React.useState(50);

    )

};

我是否需要使用属性将其赋予按钮...用伪类指向所有内容...定义按钮中的所有内容（但是可重用按钮的上下文具有灵活性）...

最好的做法是什么？

Answer 1

您以这样的样式为目标（我在 javascript 中回答以降低复杂性）：// Button.react.jsexport const StyledButton = styled.button`&nbsp; background-color: #88bdbc;`;// Controller.react.jsimport { StyledButton } from './Button.react.js';const StyledController = styled.div`&nbsp; ${StyledButton} {&nbsp; &nbsp; background-color: blue;&nbsp; }`;

Answer 2

除了丹尼斯·瓦什的回答：对于我的示例按钮组件，这意味着我需要像这样更改它：interface IButtonProps {&nbsp; &nbsp; text?: string&nbsp; &nbsp; onClick?: React.MouseEventHandler<HTMLButtonElement>&nbsp; &nbsp; className?: string}const UnstyledButton = ({&nbsp; &nbsp; text = "",&nbsp; &nbsp; onClick,&nbsp; &nbsp; className}: IButtonProps): React.ReactElement => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={onClick} className={className}>{text}</button>&nbsp; &nbsp; );};const Button = styled(UnstyledButton)<IButtonProps>`&nbsp; height: 70px;&nbsp; width: 70px;&nbsp; border: none;&nbsp; border-radius: 5px;&nbsp; background-color: #88BDBC;&nbsp; color: #254E58;&nbsp; font-family: Alata, sans-serif;&nbsp; font-size: 35px;&nbsp; transition: all 350ms;&nbsp; &:hover {&nbsp; &nbsp; background-color: #254E58;&nbsp; &nbsp; color: #88BDBC;&nbsp; }&nbsp; &:active {&nbsp; &nbsp; background-color: #112D32;&nbsp; &nbsp; color: #88BDBC;&nbsp; }`;原因是：这仅适用于样式化组件的上下文，而不适用于 ReactElement 的上下文。来自 styled-component 文档的要点： 但是，包装在 styled() 工厂中使其符合插值条件——只需确保包装的组件沿 className 传递。当你直接从 Styled Component 使用 Button 时（如提到的 Dannis Vash），你可以直接引用它。