React TypeScript Tutorial - 7 - Style Props

Introduction

In this tutorial, we will explore how to use style props in React with TypeScript. Understanding style props is essential for customizing components and making your UI dynamic and responsive. This guide will walk you through the steps needed to effectively apply style props in your React applications.

Step 1: Setting Up Your React Project

Before diving into style props, ensure you have a React project set up with TypeScript. If you haven’t created one yet, follow these steps:

1. Open your terminal.
2. Run the following command to create a new React app with TypeScript:

   npx create-react-app my-app --template typescript
   

3. Navigate into your project directory:

   cd my-app
   

4. Start the development server:

   npm start
   

Step 2: Creating a Styled Component

To apply style props, you’ll need to create a new functional component. Follow these steps:

1. Inside the src folder, create a new file named StyledComponent.tsx.
2. Import React and define your component:

   import React from 'react';
   
   interface StyledComponentProps {
       color?: string;
       backgroundColor?: string;
       width?: string;
       height?: string;
   }
   
   const StyledComponent: React.FC<StyledComponentProps> = ({ color, backgroundColor, width, height }) => {
       return (
           <div style={{ color, backgroundColor, width, height }}>
               This is a styled component.
           </div>
       );
   };
   
   export default StyledComponent;
   

Step 3: Using the Styled Component

Now that your styled component is created, you need to use it in your application.

1. Open the App.tsx file.
2. Import your StyledComponent:

   import StyledComponent from './StyledComponent';
   

3. Use the StyledComponent in your JSX and pass style props:

   function App() {
       return (
           <div>
               <StyledComponent color="white" backgroundColor="blue" width="200px" height="100px" />
               <StyledComponent color="black" backgroundColor="red" width="300px" height="150px" />
           </div>
       );
   }
   
   export default App;
   

Step 4: Testing Your Application

After implementing the component, test it to ensure everything is working as expected.

1. Make sure your development server is running.
2. Open your web browser and navigate to http://localhost:3000.
3. You should see two styled components with different styles based on the props passed.

Practical Tips

• Use default values for style props in case they are not provided. This can be done by updating the component definition:

  const StyledComponent: React.FC<StyledComponentProps> = ({
      color = 'black',
      backgroundColor = 'white',
      width = '100px',
      height = '100px',
  }) => { /* ... */ };
  

• Avoid using inline styles for complex styles; consider using CSS modules or styled-components for better maintainability.

Conclusion

In this tutorial, we covered how to create and use styled components with style props in React and TypeScript. You learned how to set up your project, create a styled component, and apply styles dynamically based on props. As a next step, you can explore more advanced styling techniques or integrate a styling library like styled-components for more complex scenarios.