in

Styling React.js applications with Emotion

typing laptop table

[ad_1]

Styling a React application can be difficult, especially if you want your styles to be organized and easy to maintain. To simplify this process, the Emotion library provides a high level abstraction on top of CSS.


What are emotions?

Emotion is a library for styling React applications, providing a simple and efficient way to manage styles. It allows you to write CSS in JavaScript and provides a flexible API for styling your components.

today’s makeup videoscroll to continue content

One of the main advantages of using Emotion to style your React application is that you can manage styles more efficiently. For example, multiple components can use the same class name without the risk of name clashes that occur when using CSS/SASS.

The Emotion library applies styles only to the components that use them, not to the entire page. This helps avoid conflicts with other styles on the page and makes your code more modular and reusable.

How to install emotion

To add the Emotion library to your React application, run the following terminal command:

 npm install --save @emotion/react

The Emotion library is now installed in your project and can be used to style your React application.

Styling with Emotion’s css Prop

After installing the Emotion library, CSS Style your React application with props.of CSS Props are similar to style props, as styles can be passed in the form of strings or regular JavaScript objects.

To style your application using CSS must be imported from @emotion/reaction Libraries, then styles.

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

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;
    `}>
      Click Me
    </button>
  )
}

export default App;

first line of code, /** @jsxImportSource @emotion/react */is a specific comment that should be added to a JSX file to indicate that the Emotion library should be used as the JSX pragma for that file.

In JSX, pragmas are functions that convert JSX syntax to regular JavaScript.By default, React uses React. createElement Works as a JSX pragma. however, @jsxImportSource You can specify a different pragma.

in this case, @emotion/reaction Pragmas in JSX jsx Use functions from the Emotion library to transform your JSX code. You can use the CSS-in-JS features of the Emotion library in your components by adding pragma comments to your JSX files.

The button component renders buttons with some custom styles. here, CSS prop adds custom styling to the button element.

of CSS props also support nested styling. Nested styling allows you to write styles that are nested within each other.

for example:

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

function App() {
  return (
    <button css={css`
      padding: 0.5rem 1rem;
      border: none;
      font-family: cursive;
      border-radius: 12px;
      color: #333333;
      background-color: inherit;
      margin-block-start: 2rem;
      margin-block-end: 2rem;

      &:hover{
        color: #e2e2e2;
        background-color: #333333;
      }
    `}>
      Click Me
    </button>
  )
}

export default App;

In this example, in the hover style declaration, CSS props. The background and font color of the code block above change each time you hover over the button.

Pass object style to css prop

of CSS Props also accept normal JavaScript object styles. When styling multiple components, object styles let you reuse styles across components.

the object style CSS In your prop, define your style as a JavaScript object and pass it to your prop.

 const style = {
    padding: '0.5rem 1rem',
    border: 'none',
    fontFamily: 'cursive',
    borderRadius: '12px',
    color: '#333333',
    backgroundColor: 'inherit',
    marginBlockStart: '2rem',
    marginBlockEnd: '2rem',

    '&:hover': {
      color: '#e2e2e2',
      backgroundColor: '#333333',
    }
}

return (
  <div className="app">
   <button css={ style }>Click Me</button>
  </div>
);

Note that CSS property names are camelCase instead of hyphenated. This is because styles are defined as JavaScript objects that use the camelCase naming convention.

Styling with styled components

The Emotion library also makes use of styled components when styling React applications. Using styled components is similar to React components, except that they contain styles out-of-the-box. To create a styled component, styled function.

of styled Functions let you create reusable styled components.to use styled Import from function. emotion/style library.

to get @emotion/style If you want to add the library to your application, install it into your project. To do this, run the following command in your project’s terminal:

 npm install @emotion/styled

After installing the @emotion/style library, import styled Works and defines style.

 import styled from "@emotion/styled";

const Button = styled.button({
    padding: '0.5rem 1rem',
    border: 'none',
    fontFamily: 'cursive',
    borderRadius: '12px',
    color: '#333333',
    backgroundColor: 'inherit',
    marginBlockStart: '2rem',
    marginBlockEnd: '2rem',

    '&:hover': {
      color: '#e2e2e2',
      backgroundColor: '#333333',
    }
})

export default Button;

In the code block above, the styled component button created. You can use this button in your React application like any other React component.

It seems like:

 import React from 'react';
import Button from './Button';

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

export default App;

rendering app The component displays a button with the style defined in button on-screen components.

of styled The function also accepts string styles. It looks different than the object style approach, but works similarly.

 import styled from "@emotion/styled";

const Button = styled.button`
    padding: 0.5rem 1rem;
    border: none;
    font-family: cursive;
    border-radius: 12px;
    color: #333333;
    background-color: inherit;
    margin-block-start: 2rem;
    margin-block-end: 2rem;

    &:hover {
        color: #e2e2e2;
        background-color: #333333;
    }
`

export default Button;

Emotional and efficient styling

Emotion is a powerful library for styling React components, providing a simple and efficient way to manage styles. Whether you’re a beginner or an experienced developer, Emotion simplifies the styling process of your React application and helps make your code easier to maintain and scale.

So if you’re looking for a more efficient and flexible way to style your React components, consider Emotion.

[ad_2]

Source link

What do you think?

Leave a Reply

GIPHY App Key not set. Please check settings

    Fitbit Sense 2 Gear

    Trackers, Watches, GPS, Health | WIRED

    644846fb90523900196fe9c5

    Harlan Crow’s Collection May Contain Fake Hitler Painting, Experts Say