时间戳

首页 > 解决方案 > 在“分子”中将样式化组件“原子”嵌套在一起 -> 样式/定位

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

问题描述

我需要创建一个 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);

    return (
        <StyledController>
            <Text text="Hello"/>
            <Switch checked={powerOn} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setPowerOn(e.target.checked)}}/>
            <Button onClick={() => false}/>
            <Text text="Hello"/>
            <RangeSlider value={volume} min={0} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setVolume(parseInt(e.target.value))} />
            <Text text="Hello"/>
            <Switch checked={bankType} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {setBankType(e.target.checked)}}/>
            <Button onClick={onClick}/>
            <Button onClick={onClick}/>
        </StyledController>
    )
};

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

最好的做法是什么？

标签： javascriptcssreactjstypescriptstyled-components

解决方案

您以这样的样式为目标（我在 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;
  }
`;

请查看相关文档。

推荐阅读