如果你想要所有 css 属性作为 typescript 中的一个类型，你放什么？

Question

StyleProps is used for size and colour.

I would prefer it was all styles.

This is so I can hand down the styles directly into the specific part of the component.

what do I put in to mean the types of all CSS properties?

how do I change the styles to be all styles?

interface StyleProps{
  color?: string;
  size?: string;
}

interface TextButtonProps {
  buttonStyle?: styleProps;
  click: () => void;
  text: string;
}

const TextButton = ({ buttonStyle, text, click }: TextButtonProps) => {

Answer 1

You can extend the built-in type CSSStyleDeclaration (ES6 lib typings):

interface StyleProps extends Partial<CSSStyleDeclaration> {
  color?: string; // ! not necessary
  size?: string;
}

interface TextButtonProps {
  buttonStyle?: StyleProps;
  click: () => void;
  text: string;
}

const TextButton = ({ buttonStyle, text, click }: TextButtonProps) => {

Partial is used because the built-in type's properties are all required.

Playground