时间戳

首页 > 解决方案 > 样式组件 - 具有相同样式的两个不同元素

javascript - 样式组件 - 具有相同样式的两个不同元素

问题描述

我有一个Button组件（在 React 中），它可以是一个button或一个a元素，这取决于是否将hrefprop 传递给组件。类似于以下内容：

const Button = ({ children, href, onClick }) => {
    if(href) {
        return <a href={href} onClick={onClick}>{children}</a>;
    }

    return <button type="button" onClick={onClick}>{children}</button>;
};

我以前使用 Sass 来设置这些组件的样式，但现在正试图转移到styled-components. 但是，我遇到了一个问题，这两个元素需要相同的样式，但是 的语法styled-components需要我创建以分隔变量 -styled.button和styled.a，每个元素都有重复的样式。

我想知道是否有一种方法可以动态更改 中使用的元素styled-components，也许基于道具，就像可以更改单个 CSS 属性一样？我尝试了一些类似的东西：

const StyledButton = styled((props) => props.href ? 'a' : 'button')`
    ...
`;

但到目前为止还没有运气。任何建议将不胜感激。

标签： javascriptreactjsstyled-components

解决方案

创建可以重复使用的通用样式

您可以提取样式并将其作为字符串参数传递给样式化组件。

const buttonStyles = `
color: red;
...
`

const StyledA = styled.a(buttonStyles);
const StyledButton = styled.button(buttonStyles);

如果你需要一些例外

import styled, { css } from ‘styled-components’;

const baseInputStyles = css`
  padding: 0.5em;
`;

const StyledA = styled.a`
  ${baseInputStyles}
`;

const StyledButton = styled.button`
  ${baseInputStyles}
  /* make changes as needed*/
`;

推荐阅读