Reacting to Style: Creative Styling Techniques in React

Styling !! A critical component for any website on the computer as it is what it is which provides us, the audience a visual treat that makes us go and delve into more and more of the website. We use special tools, like Emotion or Styled Components, to help us create these websites and make our things on the computer look their best.

And hence there are several ways to style CSS in React. Here are some of the most common ways:

Inline styling: This is the simplest and easiest way to style in React. You can directly add CSS styles to an element using the style attribute like this:
```
 <div style={{ color: 'red', backgroundColor: 'blue' }}>Hello World!</div>
```
CSS Modules: This is a technique where you can define styles locally and import them into your components. In this way, the styles are scoped to the component and don't affect other components in your application. To use CSS Modules, you need to configure your build tool to support them.
```
 import styles from './Button.module.css';

 function Button() {
   return <button className={styles.button}>Click me!</button>;
 }
```
Styled Components: This is a library that allows you to define styles using JavaScript. It creates a new component that has the styles applied to it. This allows for dynamic styles based on props or state.
```
 import styled from 'styled-components';

 const Button = styled.button`
   color: white;
   background-color: blue;
 `;

 function App() {
   return <Button>Click me!</Button>;
 }
```

CSS-in-JS libraries: These libraries allow you to write CSS in JavaScript. Some popular libraries include Emotion, JSS, and Styled System.

 import { css } from '@emotion/react';

 const styles = css`
   color: white;
   background-color: blue;
 `;

 function Button() {
   return <button css={styles}>Click me!</button>;
 }

Each approach has its advantages and disadvantages, and the best approach for your project will depend on your specific needs and preferences.

Now let's discuss some of the famous CSS-in-JS libraries !!

EMOTION

Aa aah !! Not the emotion which you think ...😁

It is a popular CSS-in-JS library for styling in React. It allows you to write CSS styles in JavaScript and provides several features that make styling in React more powerful and convenient. Here are some of the key features of Emotion:

Theming: Emotion provides a ThemeProvider component that allows you to define a theme object and pass it down to your components. This makes it easy to create a consistent visual design across your application.

 import { ThemeProvider } from '@emotion/react';

 const theme = {
   colors: {
     primary: 'blue',
     secondary: 'gray',
   },
 };

 function App() {
   return (
     <ThemeProvider theme={theme}>
       <Button>Click me!</Button>
     </ThemeProvider>
   );
 }

CSS Variables: Emotion supports CSS variables, which allows you to define a set of reusable values that can be used throughout your styles.

 const Button = styled.button`
   color: var(--text-color, black);
   background-color: var(--background-color, white);
 `;

Responsive Styles: Emotion provides a css helper function that allows you to write responsive styles using media queries. You can define different styles for different screen sizes.
```
 const Button = styled.button`
   font-size: 16px;
   @media (min-width: 768px) {
     font-size: 20px;
   }
 `;
```

Global Styles: Emotion provides a Global component that allows you to define global styles that apply to your entire application.

 import { Global, css } from '@emotion/react';

 const globalStyles = css`
   body {
     font-family: Arial, sans-serif;
   }
 `;

 function App() {
   return (
     <>
       <Global styles={globalStyles} />
       <Button>Click me!</Button>
     </>
   );
 }

These are just a few of the features that make Emotion a powerful and flexible CSS-in-JS library for styling in React. It also provides many other features such as CSS animations, keyframe animations, and more.

STYLED COMPONENTS

Styled Components is a popular library for styling in React that allows you to write CSS in JavaScript. Here are some key features of Styled Components:

Define Styled Components: Styled Components allows you to define a new styled component by writing a function that returns a styled component. You can pass in props to the function to create dynamic styles.

 import styled from 'styled-components';

 const Button = styled.button`
   font-size: 1rem;
   padding: 0.5rem 1rem;
   background-color: ${props => props.primary ? 'blue' : 'gray'};
   color: white;
   border: none;
   border-radius: 0.25rem;
   cursor: pointer;
 `;

Use Styled Components: Once you have defined a styled component, you can use it in your React components just like any other component.

 function App() {
   return (
     <div>
       <Button>Click me!</Button>
       <Button primary>Click me!</Button>
     </div>
   );
 }

Nest Styled Components: Styled Components allows you to nest components within other components, which can make your code more modular and easier to read.

 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
 `;

 const Title = styled.h1`
   font-size: 2rem;
   color: blue;
 `;

 function App() {
   return (
     <Wrapper>
       <Title>Hello, world!</Title>
       <Button primary>Click me!</Button>
     </Wrapper>
   );
 }

Extend Existing Components: You can also extend existing components with additional styles using the styled function. This can be useful if you want to apply consistent styles across your application.

 const PrimaryButton = styled(Button)`
   background-color: blue;
 `;

 function App() {
   return (
     <div>
       <Button>Click me!</Button>
       <PrimaryButton>Click me!</PrimaryButton>
     </div>
   );
 }

These are just a few of the features that make Styled Components a powerful and flexible library for styling in React. It also provides many other features such as theming, media queries, animations, and more.