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

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.js

export const StyledButton = styled.button`

  background-color: #88bdbc;

`;

// Controller.react.js

import { StyledButton } from './Button.react.js';

const StyledController = styled.div`

  ${StyledButton} {

    background-color: blue;

  }

`;

Answer 2

除了丹尼斯·瓦什的回答：

对于我的示例按钮组件，这意味着我需要像这样更改它：

interface IButtonProps {

    text?: string

    onClick?: React.MouseEventHandler<HTMLButtonElement>

    className?: string

}

const UnstyledButton = ({

    text = "",

    onClick,

    className

}: IButtonProps): React.ReactElement => {

    return (

        <button onClick={onClick} className={className}>{text}</button>

    );

};

const Button = styled(UnstyledButton)<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;

  }

`;

原因是：这仅适用于样式化组件的上下文，而不适用于 ReactElement 的上下文。

来自 styled-component 文档的要点： 但是，包装在 styled() 工厂中使其符合插值条件——只需确保包装的组件沿 className 传递。

当你直接从 Styled Component 使用 Button 时（如提到的 Dannis Vash），你可以直接引用它。