styled-components + TypeScript

需要安装 @types
yarn add -D @types/styled-components

详细说明

原生dom使用 styled.div , styled.h1

Button 是 antd 的按钮

IMyButtonProps 是props的ts类型定义,

attrs需要指定一次, 普通css开头也需要指定一次

attrs 是设置属性

一般用来封装通用的属性, 不通用的就在jsx中直接传入,
可以直接传入对象,也可以传入匿名方法最后返回对象

$myColor / $myBorderColor 是 props

$开头代表是 Transient props (v5.1新增),
框架会自动过滤掉,不会传递给React组件,不是标准dom的属性名输出到html中会报错

border-radius: 10px; 是设置style，

props 方法中可以返回字符串（无智能提示）或 CSSProperties （有智能提示）

代码

import { Button } from 'antd';
import { NextPage } from 'next';
import { memo } from 'react';
import styled from 'styled-components';interface IMyButtonProps {$switchShape: boolean;$myColor: string;$myBorderColor: string;
}let MyButton = styled(Button).attrs<IMyButtonProps>((props) => {// console.log(props);let myShape = props.$switchShape ? 'circle' : 'round';return { type: 'primary', shape: myShape };})<IMyButtonProps>`margin-left: 10px;${{padding: '100px',}}${(props) => {// 可以获取到 attrs 中的结果// console.log(props);// 返回字符串return `color:${props.$myColor}`;}};${(props) => {// 返回 react CSSProperties 对象return {borderColor: props.$myBorderColor,};}};
`;interface IProp {}
let index: NextPage<IProp> = function (props) {return (<><Button style={{ borderRadius: '20px' }} type='primary'>click 1</Button><MyButton ghost={true} $switchShape $myBorderColor='black' $myColor='red'>click 2</MyButton></>);
};export default memo(index);

React styled-components TypeScript 的最佳实践相关推荐

React Umi SSR SSG 使用TypeScript的最佳实践
说明 Umi文档对TypeScript 只字未提 (太糟糕了, 感觉像是 KPI 项目), 所以只能自己看源码和 Github 去捞TS的定义最终封装为一个类型IUmiPage 使用的时候只需要指 ...
使用Typescript和React的最佳实践
by Christopher Diggins 克里斯托弗·迪金斯(Christopher Diggins) 使用Typescript和React的最佳实践 (Best practices for us ...
react 设计模式与最佳实践
本文是阅读米凯莱·贝尔托利 <React设计模式与最佳实践> 一书的读书笔记,支持作者请点这里购买. Take is cheap, just show me the code. 废话不少说 ...
你不知道的 React 最佳实践
React ⚛️ React 是一个用于开发用户界面的 JavaScript 库, 是由 Facebook 在 2013 年创建的. React 集成了许多令人兴奋的组件.库和框架[1]. 当然,开发 ...
基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
typescript 叹号_TypeScript系列（五）最佳实践
前言在进入主题之前,我们先来简单回顾一下前四篇文章想要表达的主题: 当Redux遇到TypeScript:这篇文章从redux的action出发,介绍了as和可判别联合类型(Discriminate ...
python组件的react实现_React-Router动态路由设计最佳实践
写在前面随着单页应用(SPA)概念的日趋火热,React框架在设计和实践中同样也围绕着SPA的概念来打造自己的技术栈体系,其中路由模块便是非常重要的一个组成部分.它承载着应用功能分区,复杂模块组织, ...
React.js 2016 最佳实践徬梓阅读 1584收藏 71
为什么80%的码农都做不了架构师?>>> 译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验.2016来了 ...
小程序 Typescript 最佳实践
小程序结合TypeScript开发,如果用第三方框架,首选Taro已完美支持.但是如果你选择原生开发,那么下面的这份实践可能会帮到你. 小程序 Typescript 最佳实践使用 gulp 构建(支 ...

React styled-components TypeScript 的最佳实践

styled-components + TypeScript

详细说明

代码

React styled-components TypeScript 的最佳实践相关推荐

最新文章

热门文章