"; 2. Through dynamic control The change of state modifies the style of the element; 3. By using JS code in the DOM, the display and hiding transitions of different DOMs are realized."/> "; 2. Through dynamic control The change of state modifies the style of the element; 3. By using JS code in the DOM, the display and hiding transitions of different DOMs are realized.">
Home > Article > Web Front-end > How to dynamically modify style in react
How to dynamically modify style in react: 1. Add ref to the element whose style needs to be modified, with syntax such as "
The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.
How to dynamically modify style in react?
About three ways for React to dynamically modify element styles
React to dynamically modify element styles
Common ways for React to dynamically modify element styles There are two types: modifying the style of the element with the help of ref and dynamically controlling the change of state
1. Using ref to dynamically modify the style
Add ref
## on the element that needs to be modified. #<div className='scroll-title clear-fix' ref={ this.manage }>Add React.createRef() in constructorthis.manage = React.createRef()Use in logic codethis.manage.current.style.display = 'block'if code If this cannot be recognized, you need to change the pointer of this through let that = thisthat.manage.current.style.display = 'block'2. Modify the style of the element through dynamic control of state changes (two methods)Method 1
Set a flag display in the logic code to be true by default, change the value of display to true or false through the corresponding conditions, and then assign the corresponding style name to the DOM The className attribute, the style is written in the corresponding style For example:constructor() { super() this.state = { display: true } } componentDidMount() { window.onscroll = function(event) { if (divTop < -12) { that.setState({ display: false }) that.manage.current.style.display = 'block' } else { that.setState({ display: true }) } } }<div className={this.state.display ? 'none' : 'scroll-title }>Method 2
The implementation principle of method 2 is the same as method 1. Set a flag display in the logic code to be true by default, change the value of display to true or false according to the corresponding conditions, and then assign the corresponding style name to the DOM. className attribute, the style is written in the corresponding style. The difference is that the logic code is not judged in the DOM, but in js, as follows:3. By using JS code (ternary operator) in DOM
to realize the display and hiding conversion of different DOM
way Third, it is not changing the style in the strict sense, it is just used to change the display, hiding and display of the corresponding components.Summary:
If the changed styles are more complex, use 2
React style conflict problemThere is already a sass configuration in the react scaffolding, so you only need to install the sass dependency package and you can use sass directly- If the changed styles are not too many, use 1 and 2
- If it is just a switch between two components (display and Hidden) It is most convenient to use 3
Install the sass dependency package
npm i sass -D- Change index.css to index.scss- Import index. scss fileNote: If scss is used, you need to add ~ when using the absolute path of the image in scssbackground-image: url(~assets/login.png);css-style privatizationcss modules-Basic usageSteps
1. Change the style file name. From xx.scss -> xx.module.scss (convention in React scaffolding, distinguished from ordinary CSS) 2. Introduce and use.Import the style file into the component (note the syntax)
import styles from './index.module.scss'Access the style name in the object through the styles object to set the style
<div className={styles.css类名}></div>css class name is the class name defined in index.module.scss.Example
Define style index.module.css .root {font-size: 100px;}Use style
import styles from './index.module.css' <div className={styles.root}>div的内容</div>Principle
CSS Modules ensures the uniqueness of the class name by automatically supplementing the class name with the CSS class name , thereby avoiding the problem of style conflictsNotes on css module
It is best to use camel case naming for class names, because the final class name will generate an attribute of stylescssModules-Maintain class nameFormat
In xxx.module.scss, if you want to maintain the class name, you can use the format: :global(.class name)/*这样css modules就不会修改掉类名.a了。等价于写在 index.css中 */ :global(.a) { } /* 这样css modules就不会修改掉类名.a了, 但是 .aa还是会被修改 */ .aa :golbal(.a) { }Override the style of third-party components:global(.ant-btn) { color: red !important; }css modules-best practices- The root node of each component uses a class name in the form of CSSModules (class name of the root element: root ) - All other child nodes use ordinary CSS class names: global
index.module.scss
// index.module.scss .root { display: 'block'; position: 'absolute'; // 此处,使用 global 包裹其他子节点的类名。此时,这些类名就不会被处理,在 JSX 中使用时,就可以用字符串形式的类名 // 如果不加 :global ,所有类名就必须添加 styles.title 才可以 :global { .title { .text { } span { } } .login-form { ... } } }component usageimport styles from './index.module.scss' const 组件 = () => { return ( {/* (1) 根节点使用 CSSModules 形式的类名( 根元素的类名: `root` )*/}{/* (2) 所有子节点,都使用普通的 CSS 类名*/}) }登录 登录
Recommended learning: "react video tutorial"
The above is the detailed content of How to dynamically modify style in react. For more information, please follow other related articles on the PHP Chinese website!