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

This article mainly introduces "what is the meaning of in JS in CSS". In daily operation, I believe that many people have doubts about the meaning of in JS in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the meaning of in JS in CSS?" Next, please follow the editor to study!

Description

1. In JS in CSS, which means to write css in js language, there is no need for some separate css files at all, and all the css code is placed inside the component to achieve the modularization of css.

2. CSS in JS is actually a kind of writing thought.

There are more than 40 implementations, the most famous of which is styled-components.

Example

Import React from "react"; import styled from "styled-components"; / / create a styled H2 tag const Title = styled..h2` font-size: 1.5mm; text-align: center; color: palevioletred; `; / / create a styled section tag const Wrapper = styled.section`padding: 4em.background: papayawhip;`; / / dynamically define the style const Button = styled.styleon` background: ${props = > (props.primary? "palevioletred": "white")}; color: ${props = > (props.primary? "white": "palevioletred")}; font-size: 1mm; margin: 1em; padding: 0.25em 1mm; border: 2px solid palevioletred; border-radius: 3px`; `; / / style reuse const TomatoButton = styled (Button) `color: tomato; border-color: tomato;`; Hello World, this is my first styled component! Primary; at this point, the study of "what is the meaning of in JS in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.