How to use Inline Styling In ReactJS
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
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