We know , stay vue In the document we use scoped To proceed css Modular development , Make their styles unaffected by each other .

  And in react We found that css Style settings also have the problem of interaction .( for example : Change global style , The set style has no effect , Overwritten by styles elsewhere ...)

solve :

1,creat-react-app: solve css Conflict issues :
2,npm run eject
3, Open profile webpack.config.js
4, find css-loader to configure ( Probably in 112 Line left and right )
// add to { importLoaders:1, modules:true } // reach css-loader in

The contents are as follows :

5,npm start
6, establish css file
7, stay js Intra component reference css file import styles from '../css/style.css';
8, Use in labels <div className = {styles.div}> have a look React Import and Componet Import </div>
9, Can be div Tag generated hash value class value

/* Modular style , Class name or id Name in DOM Is overridden as hash value , And local() Consistent package effect , Are modular */ .look{ color:blue; }
/* Global definition ,:global() Class name or rule of the package id, Class name or rule id Name will not become hash value , Can be referenced globally */ :global(.test) {
font-style:italic; color:aqua; } :global(.active) { color: red; font-size:
30px; } /* 1, Global style + New style className = {styles.p +' test'} * be careful :test There is a space before 2,
className = {[styles.p,'test'].join(' ')} */
  effect :

 

Self regulation :
1, Imported third-party style sheets , Most of them .css ending , No need to enable modularity
2, Own stylesheet , All with .scss or .less ending , Enable modularity

Technology
©2019-2020 Toolsou All rights reserved,
Solve in servlet The Chinese output in is a question mark C String function and character function in language MySQL management 35 A small coup optimization Java performance —— Concise article Seven sorting algorithms (java code ) use Ansible Batch deployment SSH Password free login to remote host according to excel generate create Build table SQL sentence Spring Source code series ( sixteen )Spring merge BeanDefinition Principle of Virtual machine installation Linux course What are the common exception classes ?