Socket
Socket
Sign inDemoInstall

@emotion/react

Package Overview
Dependencies
Maintainers
4
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@emotion/react

> Simple styling in React.


Version published
Maintainers
4
Created

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

FAQs

Package last updated on 21 Aug 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc