This content originally appeared on DEV Community and was authored by _Khojiakbar_
In React, there are several ways to apply styles to your components. The most common methods include inline styles, CSS-in-JS libraries, and external CSS files. Here’s an overview of each method with examples:
1. Inline Styles
Inline styles are applied directly to the elements via the style attribute. They are written as JavaScript objects.
import React from 'react';
const InlineStyleComponent = () => {
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray',
padding: '10px',
borderRadius: '5px'
};
return (
<div style={divStyle}>
Hello, I am styled with inline styles!
</div>
);
};
export default InlineStyleComponent;
2. Internal Styles (CSS-in-JS)
CSS-in-JS is a technique where CSS is composed using JavaScript. Libraries like styled-components or emotion are commonly used for this purpose.
Using styled-components:
import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
color: blue;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
`;
const StyledComponent = () => {
return (
<StyledDiv>
Hello, I am styled with styled-components!
</StyledDiv>
);
};
export default StyledComponent;
3. External CSS Files
You can create a separate CSS file and import it into your React component.
styles.css:
.styled-div {
color: blue;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
}
Component.js:
import React from 'react';
import './styles.css';
const ExternalStyleComponent = () => {
return (
<div className="styled-div">
Hello, I am styled with an external CSS file!
</div>
);
};
export default ExternalStyleComponent;
Summary
- Inline Styles: Best for quick, dynamic styles that change based on props or state.
- Internal Styles (CSS-in-JS): Great for scoped styles, theming, and when using JavaScript to manage CSS.
- External CSS Files: Ideal for larger projects where styles are organized in separate files, promoting reusability and separation of concerns. These methods can be mixed and matched based on the needs of your project.
This content originally appeared on DEV Community and was authored by _Khojiakbar_
_Khojiakbar_ | Sciencx (2024-08-03T04:33:02+00:00) Styling Components in React 🧢. Retrieved from https://www.scien.cx/2024/08/03/styling-components-in-react-%f0%9f%a7%a2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.