英文:
An array of valid CSS property names in TypeScript, but hyphened
问题
我在组件中有一个属性，应该接受一个有效CSS属性的数组：
interface MyComponentProps {
cssProperties: (keyof CSSStyleDeclaration)[];
}
const MyComponent = ({ cssProperties }: MyComponentProps) => {
//
}
问题在于，CSSStyleDeclaration 将样式存储为具有驼峰式属性名称的对象。我需要真正的CSS属性值，带连字符的，例如 background-color 而不是 backgroundColor。我知道还有 React.CSSProperties 类型，但它也使用驼峰式属性，同时允许无单位的数字值。
是否有一种TypeScript类型，可以使用原始的、带连字符的CSS属性名称？
英文:
I have a property in my component that is supposed to get an array of valid CSS properties:
interface MyComponentProps {
cssProperties: (keyof CSSStyleDeclaration)[];
}
const MyComponent = ({ cssProperties }: MyComponentProps) => {
//
}
The problem is that CSSStyleDeclaration stores styles as an object with property names in camel case. I need real CSS property values, hyphened. So background-color instead of backgroundColor. I know there's also React.CSSProperties type, but it uses camel-cased properties too, while allowing for unitless numeric values.
Is there a TypeScript type to use original, hyphened CSS property names?
答案1
得分: 1
使用`Kebab`类型在[这里][1]可用。 _驼峰命名_的CSS属性将被转换为 _短横线命名_。
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']} />
);
[Typescript Playground][2]
[1]: https://stackoverflow.com/a/66140779/6695924
[2]: https://www.typescriptlang.org/play?target=8&ts=4.8.4#code/C4TwDgpgBA0hBGBDeAeAKlCAPYEB2AJgM5RHABOAlngOYA0UAgpjvsaRdTVALxQBE-AHy8AUFAlQM2XIRIADACQBvagDMI5KADEAvivWaoAJV3yoAfnGS4SVMYZLljfcu0tZ7ADIB7AO6aAMaIRBAo2iIWAvxQAFwCALT8rr4B5MGh4UJmIrHWEoyiopQAtmA+5MAmEIiBVWrkPiVQAOTkNXUtANxFoJBQAAqNYCR8yvlQgUREQz4j8bbIKADWECA+atW1wAB0AMIAygezkJWUEERCANoAuj26RYE+eGRQe03lePhVfAAUYMMiPETkQAJS8ER4ACuABsYT1RE8XlVGGAwLwoL9wTwRL9rCh3mVnt9JtMQTxlFcWiVqAk-JQCMAABYtG66KAAeiEolBXSAA
英文:
Use Kebab type available here. Camelcased CSS properties will be transformed into 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']} />
);
答案2
得分: 1
有一个名为csstype的库，被MUI、emotion和一些其他流行的组件库使用。
它允许你使用连字符属性。
import CSS from "csstype";
interface MyComponentProps {
cssProperties: (keyof CSS.PropertiesHyphen)[];
}
const MyComponent = ({ cssProperties }: MyComponentProps) => {
//
}
<MyComponent cssProperties={["color", "background-color"]} />;
英文:
There is this library csstype which is used by MUI, emotion and some other popular component libraries.
Which allows you to use the hyphen props
import CSS from "csstype";
interface MyComponentProps {
cssProperties: (keyof CSS.PropertiesHyphen)[];
}
const MyComponent = ({ cssProperties }: MyComponentProps) => {
//
}
<MyComponent cssProperties={["color", "background-color"]} />;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论