Socket
Socket
Sign inDemoInstall

@emotion/react

Package Overview
Dependencies
61
Maintainers
4
Versions
37
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@emotion/react

> Simple styling in React.


Version published
Maintainers
4
Weekly downloads
7,399,816
decreased by-13.56%

Weekly downloads

Package description

What is @emotion/react?

The @emotion/react package is a library designed for writing css styles with JavaScript. It is part of the Emotion library, which is a powerful tool for creating styled components in React applications. It allows developers to style their applications efficiently using the power of JavaScript and React.

What are @emotion/react's main functionalities?

Styled Components

This feature allows you to create React components with styles attached to them. The styles are written using tagged template literals, enabling dynamic styling based on props or global themes.

import styled from '@emotion/styled';

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  &:hover {
    background-color: palevioletred;
    color: white;
  }
`;

CSS Prop

The CSS prop feature enables inline styling of components using the `css` prop. This approach is useful for applying styles directly within component render methods or function bodies, allowing for more dynamic and conditional styling.

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

const style = css`
  color: hotpink;
`;

function MyComponent() {
  return <div css={style}>Styled with Emotion</div>;
}

Global Styles

Global styles allow you to define CSS styles that are applied globally across your application. This is particularly useful for setting up base styles, such as resetting margins and paddings, or applying a consistent font across your app.

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

function GlobalStyles() {
  return (
    <Global
      styles={css`
        body {
          margin: 0;
          padding: 0;
          background: papayawhip;
        }
      `}
    />
  );
}

Other packages similar to @emotion/react

Readme

Source

@emotion/react

Simple styling in React.

Install

yarn add @emotion/react

Usage

/** @jsx jsx */
import { jsx, css, Global, ClassNames } from '@emotion/react'

render(
  <div css={{ color: 'hotpink' }}>
    <div
      css={css`
        color: green;
      `}
    />
    <Global
      styles={{
        body: {
          margin: 0,
          padding: 0
        }
      }}
    />
    <ClassNames>
      {({ css, cx }) => (
        <div
          className={cx(
            'some-class',
            css`
              color: yellow;
            `
          )}
        />
      )}
    </ClassNames>
  </div>
)

More documentation is available at https://emotion.sh.

FAQs

Last updated on 27 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc