Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the things to do with CSS-in-JS". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the things to do with CSS-in-JS"?

In addition to traditional CSS, you can also use inline styles and CSS-in-JS as style options for React applications.

For inline styles, you can pass JavaScript objects to style properties:

Const myStyle = {fontSize: 24, lineHeight: '1.3 emails, fontWeight:' bold',}; Hello World!

However, not all CSS features are supported.

CSS-in-JS, on the other hand, is a technique that uses JavaScript to style components. When you parse this JavaScript, a CSS is generated (usually as an element) and appended to the DOM.

This function is implemented by third-party libraries. For example, the following is the previous example implemented using Aphrodite:

Import {StyleSheet, css} from 'aphrodite';const styles = StyleSheet.create ({myStyle: {fontSize: 24, lineHeight:' 1.3 emails, fontWeight: 'bold',}}); Hello World!

Other third-party libraries recommend:

Emotion

JSS

Radium

Styled-components

I'm not entirely in favor of using CSS-in-JS, but I have to say that some of these libraries add support for functionality that might be useful in some cases.

In this article, I'll discuss five things you can do with the above libraries in CSS-in-JS, which I bet you don't know.

1. Refer to other style components

Libraries like styled-components and emotion allow you to create React components from styles using tag template text:

Import styled from 'styled-components';// Create a component that renders a

Element with blue textconst BlueText = styled.p`color: blue; `; My blue text

They also allow you to navigate to other style components (just as you use the CSS selector):

Const ImportantText = styled.div` font-weight: bold; `; const Text = styled.div` color: gray; ${ImportantText} {font-style: italic;}`; render (Text in gray Important text in gray, bold and italic Important text bold)

This is useful when combining pseudo classes, for example, to change the color of a component when hovering:

Const Text = styled.div` color: gray; &: hover ${ImportantText} {color: red;} `

two。 Use JSS (or other libraries) to extend the features of some libraries

Suppose you have styled your application using Aphrodite, and now you need to support themes.

The problem is that Aphrodite cannot easily support themes. At least not as easy as Emotion.

However, there are two projects that combine the core of JSS with Aphrodite and styled-components, aphrodite-jss and styled-jss.

In this way, you can retain the advantages of Aphrodite (or styled-components) and use all the features and plug-ins of JSS, from rule caching to rule isolation, as well as topics, topic packages, here are the high-level components it provides:

ThemeProvider: passes the subject object to the react tree through context.

WithTheme: allows you to receive a subject object and update it as a property.

For example:

Const blackTheme = {color: 'black',}; const App = () = > ()

In the case of Aphrodite and themes, as another example, you can also use react-with-styles, which has an implementation Aphrodite or JSS interface so that you can access topic information when defining styles.

3. Link multiple animations using keyframes

Unlike inline styles, CSS-in-JS allows you to define animation using keyframes. For example, this is done using styled-components:

Const heightAnimation = keyframes` 0% {height: 0;} 100% {height: 200;} `; const myComponent = styled.div` display: inline-block; width: 200; position: relative; animation-name: ${heightAnimation}; animation-duration: 1.5s; animation-timing-function: ease;`

But what many people don't know is that you can link multiple animations by using multiple Keyframe objects in the animation property. Here are two examples of the modified animation:

Const heightAnimation = keyframes` 0% {height: 0;} 100% {height: 200;} `; const rotateAnimation = keyframes` 0% {transform: rotate (0deg);} 100% {transform: rotate (360deg);}`; const myComponent = styled.div` display: inline-block; width: 200; position: relative; animation: ${props = > CSS` ${heightAnimation} 1.5s ease infinite, ${rotateAnimation} 1.5s linear infinite `}`

Radium is another library that supports multiple animations by passing an array of Keyframe objects as animationName attribute values:

Const heightAnimation = Radium.keyframes ({0% {height: 0;} 100% {height: 200;}}, 'myHeightAnimation',); const rotateAnimation = Radium.keyframes ({0% {transform: rotate (0deg);} 100% {transform: rotate (360deg);}},' myRotateAnimation',) Const styles = {myStyle: {animationName: [heightAnimation, rotateAnimation], animationDuration: '1.5s, 1s, animationIterationCount:' infinite, infinite', animationTimingFunction: 'ease, linear', display: inline-block; width: 200; position: relative;},}; 4. Declare global styles

Everything in CSS is global, and one of the purposes of using CSS-in-JS is to eliminate global style definitions.

However, the use of global styles can sometimes be effective, for example, when you want to apply the same font style to each element on the page.

Of course, you can always use traditional CSS, import it through Webpack or declare it in an index.html file.

However, if you really want to use JavaScript in all styles, there are libraries that actually allow you to define global styles through helper components or extensions / plug-ins.

In Radium, you can use the Style component to render style elements with global styles. For example:

Will return:

Body {font-family: 'Arial, Helvetica, sans-serif';}

JSS uses a plug-in to write global styles:

Const styles = {'@ global': {body: {fontFamily: 'Arial, Helvetica, sans-serif'}

In Aphrodite, you can do this with third-party extensions:

Import {injectGlobalStyles} from "aphrodite-globals"; injectGlobalStyles ({"body": {fontFamily: 'Arial, Helvetica, sans-serif',}})

Or use the JSS global plug-in through aphrodit-jss.

5. Use styles to test components in unit tests

Some libraries contain tools for testing component styles.

Aphrodite provides an object StyleSheetTestUtils without documentation (at least at the time of writing this article), which is only applicable to non-production environments (process.env.NODE_ENV! = 'production'), there are three methods:

SuppressStyleInjection: it prevents styles from being injected into DOM, which is useful when you want to test the output of Aphrodite components without DOM.

ClearBufferAndResumeStyleInjection: it's the opposite of suppressStyleInjection, so they should be used together.

GetBufferedStyles: it returns buffer style strings that have not yet been refreshed.

The following is an example of how to use them:

Import {StyleSheetTestUtils, css} from 'aphrodite';//...beforeEach (() = > {StyleSheetTestUtils.suppressStyleInjection ();}); afterEach (() = > {StyleSheetTestUtils.clearBufferAndResumeStyleInjection ();}); test (' my test', () = > {const sheet = StyleSheet.create ({background: {backgroundColor: 'blue'},}); css (sheet.background); / / buffer will contain something like [".background _ k554e1 {background-color:blue! important } "] const buffer = StyleSheetTestUtils.getBufferedStyles (); / /...})

Radium is another example. It has a TestMode object that uses clearState,enable and disable methods to control internal state and behavior during testing.

At this point, I believe you have a deeper understanding of "what to do with CSS-in-JS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.