Emotion css in js

Introduction

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Framework Agnostic

The @emotion/css package is framework agnostic and the simplest way to use Emotion.

• Requires no additional setup, babel plugin, or other config changes.
• Has support for auto vendor-prefixing, nested selectors, and media queries.
• You simply prefer to use the css function to generate class names and cx to compose them.
• Server side rendering requires additional work to set up

import  css > from '@emotion/css' 
 
const color = 'white' 
 
render( 
 
div 
 
className=css`
 
padding: 32px; 
 
background-color: hotpink; 
 
font-size: 24px; 
 
border-radius: 4px; 
 
&:hover  
 
color: $color>; 
 
> 
 `> 
 
> 
 Hover to change color.
 
div> 
 
)

React

The @emotion/react package requires React and is recommended for users of that framework if possible.

• Best when using React with a build environment that can be configured.
• css prop support
  • Similar to the style prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.
  • 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.

  import  css > from '@emotion/react' 
   
  const color = 'white' 
   
  render( 
   
  div 
   
  css=css`
   
  padding: 32px; 
   
  background-color: hotpink; 
   
  font-size: 24px; 
   
  border-radius: 4px; 
   
  &:hover  
   
  color: $color>; 
   
  > 
   `> 
   
  > 
   Hover to change color.
   
  div> 
   
  )

  npm i @emotion/styled @emotion/react 

  The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.

  import styled from '@emotion/styled' 
   
  const Button = styled.button`
   
  padding: 32px; 
   
  background-color: hotpink; 
   
  font-size: 24px; 
   
  border-radius: 4px; 
   
  color: black; 
   
  font-weight: bold; 
   
  &:hover  
   
  color: white; 
   
  > 
  ` 
   
  render(Button>This my button component.Button>)

  Browser requirements

  Emotion supports all popular browsers and Internet Explorer 11.

  Libraries that Inspired Us

  Getting Started

  Advanced

  Tooling

  Packages

  • @emotion/react
  • @emotion/styled
  • @emotion/cache
  • @emotion/css
  • @emotion/babel-plugin
  • @emotion/eslint-plugin
  • @emotion/server
  • @emotion/jest
  • @emotion/native
  • @emotion/primitives
  • @emotion/babel-preset-css-prop

  Posts

  Источник

  Best Practices

  Emotion is an extremely flexible library, but this can make it intimidating, especially for new users. This guide contains several recommendations for how to use Emotion in your application. Keep in mind, these are only recommendations, not requirements!

  Recommendations

  Use TypeScript and object styles

  You don’t get Intellisense or type checking when using CSS strings, e.g. css`color: blue` . You can improve the developer experience and prevent style bugs by using TypeScript and object styles, which enable Intellisense and some static type checking:

  const myCss = css( color: 'blue', grid: 1 // Error: Type 'number' is not assignable to type 'Grid | Grid[] | undefined' >) 

  Colocate styles with components

  With normal CSS, the styles for a component are defined in a separate file. This makes maintenance more difficult because it’s harder to tell which components use a given piece of CSS, and you can easily forget to update the relevant CSS after modifying a component. One of the main benefits of Emotion is that you can colocate your styles with your components. All this means is that the CSS for a component should be in the same file as the component itself.

  Consider how you will share styles

  There are two main approaches for sharing styles across an Emotion application.

  To illustrate the two methods, let’s imagine we’re developing an application that needs to display error messages in many different components. All of the error messages should be red and bold. Some error messages should also use a large font.

  Method 1: Export CSS objects

  The simplest way to share styles is to export CSS from a shared file and then import that CSS in many places:

  export const errorCss = css( color: 'red', fontWeight: 'bold' >) // Use arrays to compose styles export const largeErrorCss = css([errorCss,  fontSize: '1.5rem' >]) 

  Then, in one of your components:

  import  errorCss > from '. ' return p css=errorCss>>Failed to fizzle the frozzle.p> 

  This method is great when you only want to share CSS between components. A potential drawback of this method is that shared styles are not colocated with the components that use them.

  Method 2: Share styles via component reuse

  This method is slightly more complex but arguably more powerful than the previous method.

  export function ErrorMessage( className, children >)  return ( p css= color: 'red', fontWeight: 'bold' >> className=className>> children> p> ) > // `fontSize: '1.5rem'` is passed down to the ErrorMessage component via the // className prop, so ErrorMessage must accept a className prop for this to // work! export function LargeErrorMessage( className, children >)  return ( ErrorMessage css= fontSize: '1.5rem' >> className=className>> children> ErrorMessage> ) > 

  Then, in one of your components:

  import  ErrorMessage > from '. ' return ErrorMessage>Failed to fizzle the frozzle.ErrorMessage> 

  Advantages of sharing styles via component reuse include:

  • Component reuse allows you to share both logic and styles. You can easily add additional props and functionality to the ErrorMessage component with limited refactoring.
  • Styles are always colocated with their components.

  Use the style prop for dynamic styles

  The css prop or styled should be used for static styles, while the style prop (inline styles) should be used for truly dynamic styles. By dynamic styles, we mean styles that change frequently or are unique to a single element.

  Imagine you are displaying a list of user avatars in a forum application. Every avatar shares certain static CSS, like width: 40px and border-radius: 50% , but the avatar image is set via a background-style rule whose value is different for each avatar. If you pass all of this CSS through the CSS prop, you’ll end up with a lot of nearly-duplicate CSS in the document. With 3 avatars, Emotion will create something like:

  style> .css-1udhswa  border-radius: 50%; width: 40px; height: 40px; background-style: url(https://i.pravatar.cc/150?u=0); > .css-1cpwmbr  border-radius: 50%; width: 40px; height: 40px; background-style: url(https://i.pravatar.cc/150?u=1); > .css-am987o  border-radius: 50%; width: 40px; height: 40px; background-style: url(https://i.pravatar.cc/150?u=2); > style> 

  Now imagine how much CSS there would be if there were 100 avatars on the page!

  You should also use the style prop if the styles will be updated frequently. If your application lets a user drag and drop an element, you likely have a transform property like

   transform: `translate($x>px, $y>px)` > 

  This property should go through the style prop since x and y will change rapidly as the element is dragged.

  Advanced: CSS variables with style

  CSS variables can be used with the style prop to keep the CSS in a single place while «deferring» the actual value of a property. Going back to the avatar example above, you could define the following static CSS using the css prop:

  .avatar  border-radius: 50%; width: 40px; height: 40px; background-style: var(--background-style); > 

  Then, for each avatar, you render an element which sets the value of the —background-style CSS variable:

  function Avatar( imageUrl >)  return div className="avatar" style= '--background-style': imageUrl >> /> > 

  If you’re using TypeScript, you’ll have to use a type assertion like style=> as explained here.

  If using React, prefer @emotion/react or @emotion/styled over @emotion/css

  @emotion/react and @emotion/styled generally offer a better developer experience over class names ( @emotion/css ) when using React.

  Use the css prop or @emotion/styled , but not both

  While the css prop and styled can peacefully coexist, it’s better to pick one approach and use it consistently across your codebase. Whether you choose the css prop or styled is a matter of personal preference. (If you’re curious, the css prop is more popular among the maintainers of Emotion.)

  Consider defining styles outside your components

  import  css > from '@emotion/react' const cardCss =  self: css( backgroundColor: 'white', border: '1px solid #eee', borderRadius: '0.5rem', padding: '1rem' >), title: css( fontSize: '1.25rem' >) > export function Card( title, children >)  return ( div css=cardCss.self>> h5 css=cardCss.title>>title>h5> children> div> ) > 

  Benefits of this approach:

  • Styles are only serialized once, instead of on every render.
  • It’s no longer possible to accidentally pass dynamic styles through the css prop.
  • The JSX is arguably more readable with the CSS separated out into a different part of the file.

  Define colors and other style constants as JavaScript variables

  Don’t repeat yourself! If you are using a color, padding, border radius, .etc throughout your application, add it to your theme or define it as a JavaScript constant, like

  export const colors =  primary: '#0d6efd', success: '#198754', danger: '#dc3545' > 

  Don’t use a theme unless your app supports multiple themes (or will eventually support multiple themes)

  Emotion allows you to define a theme which you can use in style rules across your application. This feature is awesome if your app has multiple themes, like light mode and dark mode.

  On the other hand, if your app will only ever have a single theme, it’s simpler to define colors and other style variables as JavaScript constants.

  Additional Reading

  Getting Started

  Advanced

  Tooling

  Packages

  • @emotion/react
  • @emotion/styled
  • @emotion/cache
  • @emotion/css
  • @emotion/babel-plugin
  • @emotion/eslint-plugin
  • @emotion/server
  • @emotion/jest
  • @emotion/native
  • @emotion/primitives
  • @emotion/babel-preset-css-prop

  Posts

  Источник

  Object Styles

  Writing styles with objects is a powerful pattern built directly into the core of emotion. Instead of writing css properties in kebab-case like regular css, you write them in camelCase , for example background-color would be backgroundColor . Object styles are especially useful with the css prop because you don’t need a css call like with string styles but object styles can also be used with styled.

  Examples

  With the css prop

  render( 
   
  div 
   
  css= 
   color: 'darkorchid', 
   backgroundColor: 'lightgray' 
   
  >> 
   
  > 
   This is darkorchid.
   
  div> 
   
  )

  With styled

  import styled from '@emotion/styled' 
   
  const Button = styled.button( 
   
   
   color: 'darkorchid' 
   
  >, 
   
  props => ( 
   fontSize: props.fontSize
   
  >) 
   
  ) 
   
  render(Button fontSize=16>>This is a darkorchid button.Button>)

  Child Selectors

  render( 
   
  div 
   
  css= 
   color: 'darkorchid', 
   
  '& .name':  
   color: 'orange' 
   
  > 
   
  >> 
   
  > 
   This is darkorchid.
   
  div className="name">This is orangediv> 
   
  div> 
   
  )

  Media Queries

  render( 
   
  div 
   
  css= 
   color: 'darkorchid', 
   
  '@media(min-width: 420px)':  
   color: 'orange' 
   
  > 
   
  >> 
   
  > 
   This is orange on a big screen and darkorchid on a small screen.
   
  div> 
   
  )

  Numbers

  When numbers are the value of a css property, px is appended to the number unless it is a css property that is unitless.

  render( 
   
  div 
   
  css= 
   padding: 8, 
   zIndex: 200 
   
  >> 
   
  > 
   This has 8px of padding and a z-index of 200.
   
  div> 
   
  )

  Arrays

  Nested arrays are flattened.

  render( 
   
  div 
   
  css=[ 
   
   color: 'darkorchid' >, 
   
   backgroundColor: 'hotpink' >, 
   
   padding: 8 > 
   
  ]> 
   
  > 
   This is darkorchid with a hotpink background and 8px of padding.
   
  div> 
   
  )

  Fallbacks

  Define fallback values for browsers that don’t support features with arrays.

  render( 
   
  div 
   
  css= 
   background: ['red', 'linear-gradient(#e66465, #9198e5)'], 
   height: 100 
   
  >> 
   
  > 
   This has a gradient background in browsers that support gradients and is red
   in browsers that don't support gradients
   
  div> 
   
  )

  With css

  You can also use css with object styles.

  import  css > from '@emotion/react' 
   
  const hotpink = css( 
   color: 'hotpink' 
   
  >) 
   
  render( 
   
  div> 
   
  p css=hotpink>>This is hotpinkp> 
   
  div> 
   
  )

  Composition

  import  css > from '@emotion/react' 
   
  const hotpink = css( 
   color: 'hotpink' 
   
  >) 
   
  const hotpinkHoverOrFocus = css( 
   
  '&:hover,&:focus': hotpink
   
  >) 
   
  const hotpinkWithBlackBackground = css( 
   
   
   backgroundColor: 'black', 
   color: 'green' 
   
  >, 
   hotpink
   
  ) 
   
  render( 
   
  div> 
   
  p css=hotpink>>This is hotpinkp> 
   
  button css=hotpinkHoverOrFocus>>This is hotpink on hover or focusbutton> 
   
  p css=hotpinkWithBlackBackground>> 
   This has a black background and is hotpink. Try moving where hotpink is in
   the css call and see if the color changes.
   
  p> 
   
  div> 
   
  )

  Источник

  Читайте также:  Free web hosting for html