[SOLVED] if you want all css properties as a type in typescript what do you put?

Issue

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) => {

Solution

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

Answered By – kellys

Answer Checked By – Marie Seifert (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *