反应中样式化组件的类型答案

【问题标题】：Type of styled-components in react反应中样式化组件的类型
【发布时间】：2019-05-09 06:12:36
【问题描述】：

我在我的项目中使用样式化组件。并拥有这个组件

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #000;
`;

我不知道我需要为这个组件添加什么类型标题：React$ComponentTypeany> 工作，但我认为放任何东西都是坏主意。

我搜索我的问题并找到这个

type StyleValue = {[key: string]: Object} | number | false | null;
type StyleProp = StyleValue | Array<StyleValue>;

但它适用于 react-native，我无法为我的项目更新它

【问题讨论】：

由于您已经将Title 初始化为样式化组件，因此您确实需要为其提供类型。您是否尝试为传递给它的道具提供类型定义？
@BoyWithSilverWings 是的，完全正确，但不确定第二部分，我需要为 Title 和他的道具提供类型定义

标签： react-redux flowtype styled-components

【解决方案1】：

我不确定你在问什么，但我会举一个例子，希望它能帮助你理解。请提供更多信息。下面我有我的Title 组件

const Title = ({
  text,
  textColor,
}) => {
  return (
    <StyledTitle textColor={color}>
      {text}
    </StyledTitle>
  );
};

Title.propTypes = {
  text: PropTypes.string,
  textColor: PropTypes.string,
};

export default Title;

使用Styled-components 然后我有我的StyledTitle.js 文件：

const StyledTitle = styled.h1`
  color: `${props => props.textColor} || black`;
  font-size: 1.5em;
  text-align: center;
`;

export default StyledTitle;

希望对你有所帮助。

【讨论】：

这是流覆盖问题，我的 App.js 文件中有 const Title，我需要一个类型注释，需要在 Styled-components 中更精确地定义数据类型。所有项目工作良好