Reactjs 带有自定义道具的样式化组件条件css的Typescript

我有两个类似的问题： 我最近一直在使用typescript，但是我需要我的样式化组件代码来验证typescript

1。我需要描述自定义道具阴影，因为typescript返回错误

类型上不存在属性“shadow” "主题化行动,， HTMLLevel>，“颜色”|“样式”|“标题”|。。。251更多| “键”>&{…；}&{…；}，默认主题>”。TS2339

---

我在表单中使用了Formik和Yup

我找到了问题的答案=）

第一个问题

我们应该创建类型或接口

而不是在我们的样式化组件中使用这种类型或接口

export const CheckBoxCustom = styled.div<ColorStateForm >`
  width: ${props => (props.width ? props.width : "24px")};
  height: ${props => (props.height ? props.height : "24px")};
  margin: ${props => (props.margin ? props.margin : "0")};
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  flex: 0 0 24px;

  &:before {
    ${props =>
      props.hideDefault &&
      css`
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: ${props => (props.width ? props.width : "24px")};
        height: ${props => (props.height ? props.height : "24px")};
        border-style: solid;
        border-width: 2px;
        border-color: ${props =>
          props.errors &&
          props.touched &&
          props.errors[props.name] &&
          props.touched[props.name]
            ? props.theme.color.redError
            : props.theme.color.mainBlue};
        box-sizing: border-box;
      `};
  }

我们需要再次传递类型或接口。例如：

 &:before {
    ${(props: ColorStateForm ) =>
      props.hideDefault &&
      css`

就这些，我的VS代码对于TypeScript来说是干净友好的

第二个问题

首先，我创建了一个类型

是的，我知道“任何”类型都是邪恶的，你可以写任何东西

然后我像那样重写了我的三元运算符并添加了我创建的类型

const colorStateForm = (props: ColorStateForm): string => {
  const {errors, touched, name, value, theme} = props;

  if(errors && touched && errors[name] && touched[name]){
    return theme.coloor.redError;
  }

  if(!value && (!value.length || value.length === 0)) {
    return theme.color.inactiveBlue;
  }  

  return theme.color.green;
}

我希望这些信息会有用

export const CheckBoxCustom = styled.div<ColorStateForm >`
  width: ${props => (props.width ? props.width : "24px")};
  height: ${props => (props.height ? props.height : "24px")};
  margin: ${props => (props.margin ? props.margin : "0")};
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  flex: 0 0 24px;

  &:before {
    ${props =>
      props.hideDefault &&
      css`
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: ${props => (props.width ? props.width : "24px")};
        height: ${props => (props.height ? props.height : "24px")};
        border-style: solid;
        border-width: 2px;
        border-color: ${props =>
          props.errors &&
          props.touched &&
          props.errors[props.name] &&
          props.touched[props.name]
            ? props.theme.color.redError
            : props.theme.color.mainBlue};
        box-sizing: border-box;
      `};
  }

 &:before {
    ${props =>
      props.hideDefault &&
      css`

 &:before {
    ${(props: ColorStateForm ) =>
      props.hideDefault &&
      css`

type ColorStateForm = {
  errors: any,
  touch: any,
  name: string,
  value: string,
  theme: any
}

const colorStateForm = (props: ColorStateForm): string => {
  const {errors, touched, name, value, theme} = props;

  if(errors && touched && errors[name] && touched[name]){
    return theme.coloor.redError;
  }

  if(!value && (!value.length || value.length === 0)) {
    return theme.color.inactiveBlue;
  }  

  return theme.color.green;
}