reactjs - 用于自定义道具的带有样式组件条件 css 的打字稿
问题描述
我有 2 个类似的问题:我最近一直在使用打字稿,但我需要将我的样式组件代码验证为打字稿。
1. 我需要描述自定义道具 - 阴影,因为打字稿返回错误
'ThemedStyledProps, HTMLDivElement>, "color" 类型不存在属性 'shadow' | “风格” | “标题” | ... 251 更多... | “键”> & { ...; } & { ...; },默认主题>'。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 作为我的表单
解决方案
我找到了我的问题的答案 =)
第一个问题
我们应该创建类型或接口
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`
我们需要再次传递我们的类型或接口。例如:
&: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;
}
我希望这个信息会有用
推荐阅读
- spotify - Spotify API:如何仅为我自己获取访问令牌
- angular - 未捕获的 ReferenceError:在初始化之前无法访问“RSI_RESULT”
- css - 我在尝试对齐这些图像时 flexbox 做错了什么?
- quarkus - Quarkus 构建异常
- javascript - 在网格动画中添加动画线
- reporting-services - SSRS 多值参数
- sql-server - 如何从 excel 文件中为子类型集群表导入数据
- javascript - 如何使用 react js 发布 JSON 数据?
- kubernetes - Kubernetes pod 疑难解答
- ruby-on-rails - 安装 RVM 时出错(gpg 密钥问题)