Question

我正在使用styled-system，并且该库的一个关键是使用速记道具来轻松快速地进行主题制作。

我简化了组件，但这是有趣的部分：

with open("old_file.txt", "r") as f, open("new_file.txt", "w") as n:
    x = f.read()
    result = re.sub("[^a-z\s]", "", x, 0, re.IGNORECASE | re.MULTILINE)
    n.write(result)

我在import React from 'react' import styled from 'styled-components' import { color, ColorProps } from 'styled-system' const StyledDiv = styled('div')<ColorProps>` ${color} ` const Text = ({ color }: ColorProps) => { return <StyledDiv color={color} /> }道具上出现错误，提示：

键入“字符串| （字符串| null）[] |未定义”不能分配给输入'string | （字符串＆（字符串| null）[]）|未定义”。

我认为这是因为color使用与原生HTML属性styled-system相同的命名，并且会发生冲突。

我该如何解决？

Answer 1

而不是使用<configuration> <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%-5level] - %msg%n</pattern> </encoder> </appender> <root level="INFO"> <appender-ref ref="STDOUT" /> </root> </configuration>，请尝试使用ColorProps（`从* csstype'中导入*作为CSS）；这是要点，显示了我如何使用打字稿/样式化系统创建一些类型化的“盒子”原语：https://gist.github.com/chiplay/d10435c0962ec62906319e12790104d1

祝你好运！

Answer 2

color似乎是在React的声明文件中的HTMLAttributes下声明的-不会导出。

我必须通过创建custom prop

来解决此问题

示例使用的是@emotion/styled，但也可以使用styled-components

// component.js
import styled from '@emotion/styled';
import { style, ResponsiveValue } from 'styled-system';
import CSS from 'csstype';

const textColor = style({
  prop: 'textColor',
  cssProperty: 'color',
  key: 'colors'
});


type Props = {
  textColor?: ResponsiveValue<CSS.ColorProperty>
}

const Box = styled.div<Props>`
  ${textColor};
`

export default Box;

// some-implementation.js
import Box from '.';

const Page = () => (
  <Box textColor={['red', 'green']}>Content in a box</Box>
);

Answer 3

我所做的是使用Typescript强制转换功能并保持样式化系统逻辑完整。例如：

const Heading: React.FC<ColorProps> = ({ color, children }) => {
  return <HeadingContainer color={(color as any)} {...props}>{children}</HeadingContainer>;
};

Answer 4

以克里斯的答案为基础，并使用custom props上的最新文档。

// core/constants/theme.ts
// Your globally configured theme file
export const theme = { colors: { primary: ['#0A43D2', '#04122B'] } }

// core/constants/styledSystem.ts
import {
  color as ssColor,
  ColorProps as SSColorProps,
  TextColorProps,
  compose,
  system,
} from 'styled-system'

// Styled-system patch for the color prop fixing "Types of property 'color' are incompatible"
// when appling props to component that extend ColorProps.
export interface ColorProps extends Omit<SSColorProps, 'color'> {
  textColor?: TextColorProps['color']
}

export const color = compose(
  ssColor,
  system({
    // Alias color as textColor
    textColor: {
      property: 'color',
      // This connects the property to your theme, so you can use the syntax shown below E.g "primary.0".
      scale: 'colors'
    }
  })
)

// components/MyStyledComponent.ts
import { color, ColorProps } from 'core/constants/styledSystem.ts'

interface MyStyledComponentProps extends ColorProps {}

export const MyStyledComponent = styled.div<MyStyledComponentProps>`
  ${color}
`

// components/MyComponent.ts
export const MyComponent = () => <MyStyledComponent textColor="primary.0">...

编辑：更新为样式组件^ 5.0.0可以解决此问题

https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md#v500---2020-01-13

Answer 5

只是添加到 xuanlopez 的答案中 - 不确定 5.0.0 版本具体解决了什么问题 - 但使用 $color 作为重命名的 prop 而不是 textColor 将其指定为 { {3}} 在样式组件中，因此它不会作为道具出现在渲染的 DOM 中。

使用TypeScript键入样式的系统道具

5 个答案: