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
Below are the approaches to add styling to defaultValue in textarea:
Table of Content
- Using Inline Styling
- Using Styled Components
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 w3wiki! 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:
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 w3wiki! 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:
Output
Contact Us