×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 33 – Add 的CSS 伪元素 In 反应

    课程清单
    [在React中添加CSS伪元素,在React中添加CSS伪元素]

    在上一课中,我们通过弹出配置进行微调,然后从CSS文件导入类并使用它们来启用CSS模块。

    的CSS 模块中的伪元素

    伪选择器在以下方面很重要 App.js 在其中分配按钮样式。
    现在,我们将不再使用按钮上的样式属性,因此也将从那里删除它的定义属性。

    App.js
    
    ...
    return (
    	...
    		<button style={style} onClick={this.togglePersonsHandler}>
    			Switch Name
    		</button>
    	...
    );
    ...
    

    After that will create a .button or by applying css rules i.e. (.App button { ... }) css class in App.css 文件。

    App.css
    
    .App {
    	text-align: center;
    }
    .red {
    	color: red;
    }
    .bold {
    	font-weight: bold;
    }
    .App button {
    	border: 1px solid blue;
    	padding: 15px;
    	background-color: green;
    	font: inherit;
      color: white;
      cursor:pointer;
    }
    

    现在,当您运行该应用程序时,您会发现已应用了新样式,并且不再像通过检查元素所发现的那样绑定内联css。
    现在,当然,我们仍然希望能够将按钮设置为红色,并且希望能够看到鼠标悬停在其上方。

    :hover 伪元素

    So let me add :hover to the button with normal css

    App.css
    
    ...
    .App button {
    	...
    }
    .App button:hover {
    	background-color: lightgreen;
    	color: black;
    }
    

    现在让我们处理红色表壳。现在,我只需添加Red类,当然,悬停部分

    App.css
    
    ...
    .App button {
    	...
    }
    .App button:hover {
      ...
    }
    .App button.Red {
    	background-color: red;
    }
    .App button.Red:hover {
    	background-color: salmen;
      color: black;
    }
    

    现在,我们需要做的就是,如果需要的话,有条件地将Red类添加到按钮中。 App.js

    有条件的绑定类

    所以在 App.js we simply need to bind className off the button. so will do it inside the Render() method.
    在if语句之前,我们有一个默认的按钮类,假设它是null或只是一个空字符串。

    App.js
    
    render() {
      ...
    	let btnClass = '';
      ...
    }
    

    然后在if语句中我分配人员的地方。

    App.css
    
    import AppClasses from './App.css';
    ...  
    if (this.state.showPersons) {
    	...
    	btnClass = AppClasses.Red;   // also work for nested class
    }
    ...
    return (
    	 ...
    		<button className={btnClass} onClick={this.togglePersonsHandler}>
    			Switch Name
    		</button>
    	 ...
    );
    
    注意 :
    我们在导入的CSS文件中定义的所有CSS类都可以通过该CSS模块启用CSS文件中定义的任何类,即使这些类应用于特殊的子选择器也可以在要导入的对象上使用。
    反应introduction
    反应Component
    在React中添加CSS伪元素
  • 启用通知    不用了,谢谢