Styling React Using CSS
Styling React Using CSS
Styling in React can be done using various approaches, including regular CSS, inline styles, CSS-in-JS libraries, and CSS modules. Here, I'll cover some common methods:
1. Regular CSS:
You can create a separate CSS file and import it into your React components. For example:
styles.css:
/* styles.css */
.myComponent {
color: blue;
font-size: 16px;
}
MyComponent.js:
import React from 'react';
import './styles.css';
const MyComponent = () => {
return (
<div className="myComponent">
This is my component.
</div>
);
};
export default MyComponent;
2. Inline Styles:
You can apply styles directly within the JSX using inline styles. Note that the styles are defined as JavaScript objects:
const MyComponent = () => {
const styles = {
color: 'blue',
fontSize: '16px',
};
return (
<div style={styles}>
This is my component.
</div>
);
};
3. CSS-in-JS Libraries:
There are libraries like Styled Components, Emotion, and JSS that allow you to write CSS directly in your JavaScript files. Here's an example with Styled Components:
import styled from 'styled-components';
const StyledDiv = styled.div`
color: blue;
font-size: 16px;
`;
const MyComponent = () => {
return (
<StyledDiv>
This is my component.
</StyledDiv>
);
};
4. CSS Modules:
CSS Modules are a way to locally scope your CSS class names. Each CSS module file is treated as a separate module:
styles.module.css:
/* styles.module.css */
.myComponent {
color: blue;
font-size: 16px;
}
MyComponent.js:
import React from 'react';
import styles from './styles.module.css';
const MyComponent = () => {
return (
<div className={styles.myComponent}>
This is my component.
</div>
);
};
export default MyComponent;