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.

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.