reactjs - What is the benefit of @emotion/core over emotion for a React project?


Question: 

If I install emotion then the API is nice and clear:

package.json:

"dependencies": {
  "emotion": "^10.0.9",

React component:

import React from "react";
import { css } from "emotion";

const someStyle = css`
    display: none;
`

function MyComponent() {
  return (
    <div className={someStyle} />
  );
}

However according to the docs you should install @emotion/core: https://emotion.sh/docs/introduction

package.json:

"dependencies": {
  "@emotion/core": "^10.0.15",

Now the API is a lot more messy:

import React from "react";
/** @jsx jsx */
import { jsx, css } from "@emotion/core";

const someStyle = css`
  display: none;
`;

function MyComponent() {
  return (
    <div css={someStyle} />
  );
}

Not only do you need a comment /** @jsx jsx */, but you also have to import jsx even though it's not used. In my IDE this means I get a lint warning by my React import.

What is the benefit of the recommended way? Im tempted to ignore the documentation and do it the old way.




1 Answer: 

The jsx pragma/import is required because the css prop is provided by a wrapper around React.createElement - without that transform being applied, the css prop would not work.

That said, including it in every file is tedious - that's why there is a babel plugin that does it for you.

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

With regards to the benefits of using this method over the stock emotion package, the docs list some on the page you linked:

  • CSS prop support
    • Similar to the style prop but adds support for nested selectors, media queries, and auto-prefixing.
    • Allows developers to skip the styled API abstraction and style components and elements directly.
    • The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.
    • Reduces boilerplate when composing components and styled with emotion.
  • Server side rendering with zero configuration.
  • Theming works out of the box.
  • ESLint plugins available to ensure proper patterns and configuration are set.
 

More Articles


exchange server - What e-mail address ("From" vs. "Mail From") is considered by my block list?

We are getting a lost of spam /phishing e-mails where the [From] is showing our own domain (e.g. "john@foobar.com"), but the [Mail From] (return-path) in the e-mail header is showing "root@foo-574401.hostbar.com".Question is now, which e-mail address is actually considered by the Exchange Online blo

How to use binary matrix in CSV for apriori alogorithm in r

I am trying to use the binary matrix containing transactions for the apriori algorithm I don't know how to implement it data_purchase Txn Bag Blush Nail.Polish Brushes Concealer Eyebrowpencil Bronzer1 1 0 1 1 1 1 0 12 2 0 0 1

email - Getting Mail body In PHP

What I am doing:First I am trying to get email and save the reply of user in my database.For this I am using PHP imap method to get mail from my email address.Code:function get_email(){ //define server, email , password $server = '{server.example.com:143}INBOX'; $user_name = 'login';


Facebook Like Button: Unify a Url & a Facebook Page

In Facebook docs it says:Can I link the Like button to my Facebook page?Yes. Simply specify the URL of your Facebook page inthe href parameter of the button.My problem is that I don't want the Facebook page to be the target of the 'like'.So currently, the like button on my site attributes the likes

functional programming - Mix pure function with side effect in scala

I have a simple api method:def addWishToBoard(wish: Wish, boardId: BoardId, userId: UserId): Option[Board]It adds wish to board, if boardId and userId matches.Boards are stored simply in a list:private var boards = List.empty[Board]I use var here in order to simulate side effect.The implementation c

php - how to set a page active automatically when it is loaded

i want to change the active class when each page loaded. my jquery code is$(document).ready(function () {$('.nav li a').click(function(e) { $('.nav li a.active').removeClass('active'); $(this).addClass('active'); e.preventDefault();});});and my html code is<ul class="nav nav-stacked bg-n


macos - uninstall python on mac Mavericks

I'm a new Mac user. I installed python 2.7.6 but I cannot run my scripts (through IDLE or simply a script). I want to reinstall it but I don't want to mess with the version which comes pre-installed on mac.Thank you for your help.note: there are questions on stackOverflow that are similar to mine, y

R: turning list items into objects

I have a list of objects that I've created manually, like this:rand1 <- rnorm(1e3)rand2 <- rnorm(1e6)myObjects <- NULLmyObjects[[1]] <-rand1myObjects[[2]] <-rand2names(myObjects) <- c("rand1","rand2")I'm working on some code that bundles up objects and puts them up in S3. Then I ha

scalatest - Confusing type mismatch in Scala

I have:val words = List("all", "the", "words", "all", "the", "counts", "all", "day")val map = Exercise02.count(words.iterator)val expected = Map("all" -> 3, "the" -> 2, "words" -> 1, "counts" -> 1, "day" -> 1)where Exercise02.count is java.util.Iterator[String] => Map[String, Int]

Apply function to one element of a list in Python

I'm looking for a concise and functional style way to apply a function to one element of a tuple and return the new tuple, in Python.For example, for the following input:inp = ("hello", "my", "friend")I would like to be able to get the following output:out = ("hello", "MY", "friend")I came up with t