Question

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

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

，我不知道我需要为此组件添加什么类型标题：React $ ComponentType <any>可以工作，但是我认为这是个坏主意。

我搜索我的问题并找到

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

但是它是本机的，我无法为我的项目更新

Answer 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;

希望这对您有所帮助。

react中的样式化组件的类型

1 个答案: