How to pass CSS styles as props in React TypeScript

React allows us to pass information to a component using something called Props. To Pass CSS styles as props in React TypeScript, we will pass it as a normal parameter combined with use with restructuring. Follow this article for a detail tutorial.

Pass CSS styles as props in React TypeScript

Use the syntax of destructuring

Destructuring in React is a feature introduced in ES6. This feature is useful for extracting properties from objects and arrays and assigning them to variables.

Take a look at the code below:

import React from 'react';

type TextProps = {
    styles: React.CSSProperties;
    children: React.ReactNode;
};

function Text({ styles, children }: TextProps) {
    return <p style={styles}>{children}</p>;
}

const App = () => {
    return (
        <div>
            <Text
                styles={{ fontSize: '2rem', color: 'white', backgroundColor: 'gray' }}
            >
                Hello
            </Text>
        </div>
    );
};

export default App;

First, we create a type named TextProps to declare the input data:

type TextProps = {
    //React.CSSProperties is a typescript-specific interface.
    styles: React.CSSProperties;
    children: React.ReactNode;
};

Next, create a Text component that returns a <p> tag.

function Text({ styles, children }: TextProps) {
    return <p style={styles}>{children}</p>;
}

In the parameter passed, we get the two properties defined in the type TextProps above by destructuring technique.

The <p> tag will then receive these attributes as the style and the child element, respectively.

Here we set the passed parameter ‘styles’ to distinguish it from the built-in default property ‘style’.

const App = () => {
    return (
        <div>
            <Text
                styles={{ fontSize: '2rem', color: 'white', backgroundColor: 'gray' }}
            >
                Hello
            </Text>
        </div>
    );
};

And in the App component, we will pass the ‘styles’ property to the right side of the Text component: {fontSize: '2rem', color: ‘white’,backgroundColor: 'gray'} , a string ‘Hello’ as children.

Output:

Pass as a parameter

This solution will still style the string ‘Hello’, but we will pass this style as a regular parameter.

We’ll change the above example a bit:

import React from 'react';

type TextProps = {
    styles: React.CSSProperties;
    children: React.ReactNode;
};

const Text: React.FC<TextProps> = (props) => {
    return <p style={props.styles}>{props.children}</p>;
}

const App = () => {
    return (
        <div>
            <Text
                styles={{ fontSize: '2rem', color: 'white', backgroundColor: 'gray' }}
            >
                Hello
            </Text>
        </div>
    );
};

export default App;

const Text: React.FC<TextProps> = (props) : The Text component will be of type React Functional Component, and it takes in props of type TextProps props. From props, we will be able to access specific properties inside : <p style={props.styles}>{props.children}</p>

Output:

We will still get the string ‘Hello’ with white color, gray background, and size ‘2rem’ ( rem: A reference unit that is proportional to the root element of a website )

Summary

In conclusion, you can pass CSS styles as props in React TypeScript using the destructuring syntax or pass it as a regular parameter. Also, you can pass any data type using props in React. If you still have questions, leave us a comment.

Cheryl Matth

After studying and researching, I have acquired the necessary programming skills of a web programmer. In addition to HTML, Css, Bootstrap has some popular libraries such as reactJS and NodeJS. It is enough for me when designing from front-end to back-end.