How to use Styled Components In ReactJS
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
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.
Contact Us