Машинопись со стилизованным условным CSS компонентом для пользовательских свойств

У меня есть 2 похожих вопроса: я недавно работал с машинописным текстом, но мне нужно, чтобы мой код стилизованного компонента был валидирован для машинописного текста.

1. Мне нужно описать настраиваемую опору - тень, потому что ошибка возврата машинописного текста

Свойство shadow не существует для типа ThemedStyledProps, HTMLDivElement>, "color" | «стиль» | "название" | ... еще 251 ... | "ключ"> & {...; } & {...; }, DefaultTheme> '. TS2339

 export const InputBlock = styled.div<{height: string}>`
          display: flex;
          width: 100%;
          height: ${props => (props.height ? props.height : "56px")};

          ${props =>
            props.shadow &&
            css`
              box-shadow: ${props =>
                props.shadow ? "4px 4px 10px rgba(31,31,31,0.1)" : "none"};
            `};
        `;

2. как я могу описать этот props.touched [props.name] в моем интерфейсе

interface FormSchema {
  errors: {
    [name: string]?: string, // ????
  },
  touched: {
    [propName: string]?: string, // ???
  },
  value: string,
  theme: {
    color: {
      redError?:string,
      inactiveBlue?:string,
      green?:string,
    }
  }
}

const colorStateForm = (props: FormSchema) =>
  props.errors &&
  props.touched &&
  props.errors[props.name] &&
  props.touched[props.name]
    ? props.theme.color.redError
    : !props.value && (!props.value.length || props.value.length === 0)
    ? props.theme.color.inactiveBlue
    : props.theme.color.green;

Я использовал Formik и Yup для своей формы


reactjs typescript formik yup styled-components
person Роман Гирич    schedule 21.02.2020    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я нашла ответ на свой вопрос =)

для первого вопроса

мы должны создать тип или интерфейс

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

чем мы используем этот тип или интерфейс в нашем стилизованном компоненте

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;
      `};
  }

здесь нам нужно использовать TypeScript для условного css онлайн

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

нам нужно снова передать наш type или interface. Например:

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

вот и все, мой VS Code чист и удобен для TypeScript

по второму вопросу

Первым делом я создал тип

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

Надеюсь эта информация будет полезна

person Роман Гирич    schedule 24.02.2020
comment
props.width ? props.width : "24px" можно отремонтировать: props.width ?? '24px' - person captain-yossarian; 09.07.2021
comment
Большой! Я работал над чем-то вроде этого - person S. Wasta; 15.07.2021