React+TypeScript报错：IStyledComponent无法赋值给string类型的解决方法

错误原因 #

SearchContainer是styled-components生成的React组件，而className属性要求传入字符串类型的类名，直接把组件赋值给className就会触发TypeScript类型不匹配错误。

可行解决方案 #

方案1：复用样式到Form组件

如果是想让Form拥有SearchContainer的样式，不要直接传组件给className，而是通过styled-components的样式复用能力实现：

• 提取共享样式片段，分别应用到容器和Form：

import styled, { css } from 'styled-components';

// 提取共享样式
const sharedSearchStyles = css`
  max-width: 1024px;
  padding: 0 10px;
`;

// 容器组件使用共享样式
const SearchContainer = styled.div`
  ${sharedSearchStyles}
`;

// 基于Form组件创建带共享样式的StyledForm
const StyledForm = styled(Form)`
  ${sharedSearchStyles}
`;

// 使用时替换原Form为StyledForm
<SearchContainer>
  <StyledForm
    submitButtonLabel={'Search'}
    onBeforeSubmit={saveData}
    formData={data}
  />
</SearchContainer>

方案2：直接给Form添加自定义类名

如果只是想给Form设置普通类名，直接传入字符串即可：

// 方式1：手写类名
<Form
  className="search-form"
  submitButtonLabel={'Search'}
  onBeforeSubmit={saveData}
  formData={data}
/>

// 方式2：用styled-components创建专属样式的Form
const StyledForm = styled(Form)`
  // 这里写Form的自定义样式
  max-width: 1024px;
  padding: 0 10px;
`;

<SearchContainer>
  <StyledForm
    submitButtonLabel={'Search'}
    onBeforeSubmit={saveData}
    formData={data}
  />
</SearchContainer>

方案3：若为误操作（想给SearchContainer加类名）

如果是不小心把className写到了Form上，实际想给SearchContainer添加类名，调整位置即可：

<SearchContainer className="your-custom-class">
  <Form
    submitButtonLabel={'Search'}
    onBeforeSubmit={saveData}
    formData={data}
  />
</SearchContainer>

内容的提问来源于stack exchange，提问作者James Sapam