Add Styling to defaultValue in textarea in React

Textarea in ReactJS can be styled to defaultValue using various approaches such as inline styling and Styled Components. Inline styling allows for direct CSS property application within JSX, while Styled Components provides a structured way to define and manage CSS styles within React components.

Prerequisites

• NPM & NodeJS
• ReactJS

Below are the approaches to add styling to defaultValue in textarea:

Steps to Create a React App

Step 1: Set up a new React project using:

npx create-react-app myapp

Step 2: Navigate to the root of the project using the following command:

cd myapp

Step 3: Install the required packages using the below command:

npm install styled-components

Project Structure:

The Updated package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^6.1.11",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Using Inline Styling

In this approach, we are using inline styles directly within the JSX to style the defaultValue in the textarea.

Example: The below example uses Inline Styling to add styling to defaultValue in textarea in ReactJS.

// App.js
import React from 'react';

function App() {
    const defaultValue =
"Welcome to GeeksforGeeks! This is an example of inline styled textarea.";

    return (
        <div style={{
            padding: '20px',
            fontFamily: 'Arial, sans-serif'
        }}>
            <h3>Using Inline Styling</h3>
            <textarea
                defaultValue={defaultValue}
                style={{
                    width: '50%',
                    height: '150px',
                    padding: '10px',
                    border: '1px solid #2E8B57',
                    borderRadius: '5px',
                    fontSize: '20px',
                    color: 'red',
                    backgroundColor: '#f9f9f9',
                }}
            />
        </div>
    );
}
export default App;

Start your application using the following command:

npm install styled-components

Output:

Using Styled Components

In this approach, we are using Styled Components in React to add styling to the defaultValue in a textarea. Styled Components allow us to define CSS styles directly within our React components, making it easy to create reusable and maintainable styled elements. The StyledTextarea component encapsulates the styling for the textarea, including properties like width, height, padding, border, border-radius, font-size, color, and background-color.

Example: The below example uses Styled Components to Add styling to defaultValue in textarea in ReactJS.

// App.js

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;
  font-family: Arial, sans-serif;
`;
const Title = styled.h1`
  color: #2E8B57;
`;
const Subtitle = styled.h3`
  color: #333;
`;
const StyledTextarea = styled.textarea`
  width: 50%;
  height: 150px;
  padding: 10px;
  border: 2px solid #2E8B57;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  background-color: #f9f9f9;
  margin-bottom: 20px;
`;
function App() {
    const defaultValue =
"Welcome to GeeksforGeeks! This is an example of Styled Components styled textarea.";
    return (
        <Container>
            <Subtitle>Using Styled Components</Subtitle>
            <StyledTextarea defaultValue={defaultValue}
                style={{ backgroundColor: '#f5f5f5', color: '#2E8B57' }} />
            <StyledTextarea defaultValue={defaultValue}
                style={{ border: '2px dotted #2E8B57', borderRadius: '10px' }} />
        </Container>
    );
}
export default App;

Output: