styled-components TypeScript
TypeScript
styled-components具有来自DefinitelyTyped的社区组织的TypeScript定义,以允许该库在任何TypeScript项目中使用。要安装它们,请运行:
npm install @types/styled-components
在开始有效使用TypeScript之前,您需要做一些配置。
创建一个声明文件
自版本以来,可以通过使用声明合并来扩展样式组件的TypeScript定义。v4.1.4 的定义。
因此,第一步是创建一个声明文件。命名吧风格的 例如。
// import original module declarations
import 'styled-components'
// and extend them!
declare module 'styled-components' {
export interface DefaultTheme {
borderRadius: string
colors: {
main: string
secondary: string
}
}
}
默认主题 被用作 道具主题盒子外面。默认情况下,界面默认主题 是空的,所以这就是我们需要扩展它的原因。
创建一个主题
现在,我们可以使用 默认主题 在上述步骤中声明。
// my-theme.ts
import { DefaultTheme } from 'styled-components'
const myTheme: DefaultTheme = {
borderRadius: '5px',
colors: {
main: 'cyan',
secondary: 'magenta',
},
}
export { myTheme }
React-Native:
// styled-components.ts
import * as styledComponents from "styled-components/native";
import ThemeInterface from "./theme";
const {
default: styled,
css,
ThemeProvider
} = styledComponents as styledComponents.ReactNativeThemedStyledComponentsModule<ThemeInterface>;
export { css, ThemeProvider };
export default styled;
造型组件
而已!只需使用任何原始导入,我们就可以使用样式化组件。
import styled, { createGlobalStyle, css } from 'styled-components';
// theme is now fully typed
export const MyComponent = styled.div`
color: ${props => props.theme.colors.main};
`;
// theme is also fully typed
export MyGlobalStyle = createGlobalStyle`
body {
background-color: ${props => props.theme.colors.secondary};
}
`;
// and this theme is fully typed as well
export cssHelper = css`
border: 1px solid ${props => props.theme.borderRadius};
`;
使用自定义道具
如果要将自定义属性传递给样式化的组件,则最好将类型参数传递给这样的标记模板(TypeScriptv2.9 +是必需的)
import styled from 'styled-components';
import Header from './Header';
interface TitleProps {
readonly isActive: boolean;
};
const Title = styled.h1<TitleProps>`
color: ${props => props.isActive ? props.theme.colors.main : props.theme.colors.secondary};
`
const NewHeader = styled(Header)<{ customColor: string }>`
color: ${props => props.customColor};
`
您将需要定义自定义道具和将使用的标签类型。传递自定义组件时,不需要标记类型。
import styled from 'styled-components'
import Header from './Header'
const Title =
styled <
{ isActive: boolean } >
Header`
color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`
如果不应该将isActive属性传递给Header组件,则必须使用以下约定将其提取:
import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'
const Title =
styled <
{ isActive: boolean } >
(({ isActive, ...rest }) => <Header {...rest} />)`
color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`
但这可能是相反的。也许您的样式化组件需要代理Header所需的道具。然后您遵循以下约定:
import styled from 'styled-components'
import Header, { Props as HeaderProps } from './Header'
const Title =
(styled < { isActive: boolean }) &
(HeaderProps >
(({ isActive, ...rest }) => <Header {...rest} />)`
color: ${props => (props.isActive ? props.theme.primaryColor : props.theme.secondaryColor)}
`)
这是最复杂的示例,其中我们具有用于组件样式的特定属性,并通过Header传递其余所需的属性。这意味着当您使用Title时,它将同时具有样式要求和实际组件要求的组合类型。
类名警告
定义组件时,您需要标记 班级名称 作为Props界面中的可选:
interface LogoProps {
/* This prop is optional, since TypeScript won't know that it's passed by the wrapper */
className?: string;
}
class Logo extends React.Component<LogoProps, {}> {
render() {
return <div className={this.props.className}>Logo</div>
}
}
const LogoStyled = styled(Logo)`
font-family: 'Helvetica';
font-weight: bold;
font-size: 1.8rem;
`
功能组件警告
要使用功能组件并对道具进行类型检查,您需要定义组件及其类型。这对样式化组件并不特殊,这就是React的工作方式:
interface BoxProps {
theme?: ThemeInterface;
borders?: boolean;
className?: string;
}
const Box: React.FunctionComponent<BoxProps> = props => <div className={props.className}>{props.children}</div>
const StyledBox = styled(Box)`
padding: ${props => props.theme.lateralPadding};
`
更多建议: