reactjs TypeScript格式的有效CSS属性名称数组，但使用连字符

7qhs6swi 于 2023-02-08 发布在 React

关注(0)|答案(2)|浏览(114)

我的组件中有一个属性，它应该获取有效CSS属性的数组：

interface MyComponentProps {
    cssProperties: (keyof CSSStyleDeclaration)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
    //
}

问题是CSSStyleDeclaration将样式存储为一个对象，属性名为驼峰大小写。我需要真实的的CSS属性值，带连字符。所以background-color代替backgroundColor。我知道也有React.CSSProperties类型，但它也使用驼峰大小写的属性，同时允许无单位的数值。
是否有TypeScript类型可以使用原始的、带连字符的CSS属性名？

reactjs

来源：https://stackoverflow.com/questions/75359868/an-array-of-valid-css-property-names-in-typescript-but-hyphened

2条答案

按热度按时间

7eumitmz1#

有一个库csstype，它被MUI、情感和其他一些流行的组件库所使用。
它允许您使用连字符属性

import CSS from "csstype";

interface MyComponentProps {
  cssProperties: (keyof CSS.PropertiesHyphen)[];
}

const MyComponent = ({ cssProperties }: MyComponentProps) => {
  //
}

<MyComponent cssProperties={["color", "background-color"]} />;

赞(0）回复(0）举报 2023-02-08

bgtovc5b2#

使用Kebab类型可用here。* Camelcased * CSS属性将转换为 * kebabcase *。

type Kebab<T extends string, A extends string = ""> =
    T extends `${infer F}${infer R}` ?
    Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> :
    A

type Props = {
    cssProps: Kebab<keyof React.CSSProperties>[];
}

const Component = (props: Props) => null;

const App = () => (
  <Component cssProps={['min-width']} />
);

打字机Playground

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs TypeScript格式的有效CSS属性名称数组，但使用连字符

2条答案

相关问题

热门标签

最新问答