@9oelm/styled-system-typescript 中文文档教程

Question

@9oelm/styled-system-typescript

Typescript-only styled system solution

npm i @9oelm/styled-system-typescript

yarn add @9oelm/styled-system-typescript

Example

import styled from 'styled-components'
import { WithSpecifiedStyles } from '@9oelm/styled-system-typescript'

const Box = styled.div(
  {
    backgroundColor: "#333333",
    height: 20,
  },
  (styles: PickStyles<"margin" | "height" | "width">) => styles
)

const MyComponent = () => {
  <Box margin={10} height={60} width={10}>
    Hi
  </Box>
}

Rationale

有时你想通过注入自定义样式来动态调整由 styled-component 制作的组件的样式。 如果您使用的是 typescript，这将帮助您实现这一点，而无需任何额外的 javascript。 它只能用打字稿完成。

API

Identity 和 identity：

type Identity<Self = any> = (x: Self) => Self;

const withSpecifiedStyles: <Self>() => Identity<Self> = () => (x) => x;

WithSpecifiedStyles：

type WithSpecifiedStyles<
  Styles extends keyof CSSProperties = keyof CSSProperties
> = Identity<{ [K in Styles]?: string | number }>;

PickStyles：

type PickStyles<Styles extends keyof CSSProperties = keyof CSSProperties> = {
  [K in Styles]?: string | number;
};

GetStylesFrom：

type GetStylesFrom<
  WithSpecifiedStyleFn extends WithSpecifiedStyles
> = ReturnType<WithSpecifiedStyleFn>;