小编Aas*_*sen的帖子

我正在制作一个组件库以在我的项目中使用 - 我之前已经使用过很多样式组件，这是我将样式应用于组件的首选方式。我最喜欢它的是能够使我的组件功能齐全且独立。

我有一个问题，但我还没有真正能够令人满意地解决。

我想做这样的事情，但无论我做什么，我似乎都无法从样式组件中访问或设置道具。

import React, { useState } from 'react';
import styled from 'styled-components';

const Button = ({ className }) => {
  const [clicked, setClicked] = useState(false);
  return (
    <button className={className} clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </button>
  );
};

export default styled(Button)`
  ${applySomeStyle}
  ${props => props.clicked} {
    ${applySomeOtherStyle}
  }
`;

我已经能够通过这样做来“解决”它，但是仅仅为了这个目的创建一个虚拟组件似乎是非常多余的。能够做我在示例 #1 中所做的事情似乎更自然。

import React, { useState } from 'react';
import styled from 'styled-components';

const Dummy = styled.button``;

const Button = ({ className }) => {
  const [clicked, …