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

  • 19 – Add Stylesheet and 内联样式 In 反应

    课程清单
    React中的样式表和内联样式。
    React中的样式表和内联样式。

    we already learned a lot about the react basics over the last lectures our applications still can use some extra styling. For example, those Person components would be nice if they would look like cards and therefore be more like closed objects right now we can’t see the difference or we cannot see the borders between components.
    因此,对组件进行样式设计显然是非常重要的,现在我们可以通过两种方式来进行样式设计,我将向您展示
    首先让我们添加 人.csssrc /人

    注意:
    现在有一件重要的事情,曾经将我们视为我编写的代码 人.css 不限于 Person.js 组件是全局CSS代码。
    src /人/Person.css
    
    .Person{
      width:60%;
      margin: 16px auto;
      border: 1px solid #eee;
      box-shadow: 0 2px 3px #ccc;
      padding: 16px;
      text-align: center;
    }
    

    So we will define a class with the name Person. Still we could use this any where 在 our application since it is global but by using our component name we can rule out the danger of and accidentally using it somewhere else.
    Now will assign the .Person class to the Person component 在side a div

    src / Person / Person.js
    
    import 反应from 'react';
    const person = props => {
    	return (
    		<div className="Person">
    			 ...
    		</div>
    	);
    };
    export 默认 person;
    

    现在,当您保存所有文件并在浏览器中加载应用程序时…。没有应用样式。

    你知道为什么吗?

    好吧,因为我们在 人.css 但是默认情况下,这可能是您不知道的,因为它不一定直观,但默认情况下,我们的项目中没有文件包含在由构建工作流创建的代码中。
    您始终必须导入文件才能将它们添加到游戏中。
    So 在 App component we import the Person component 在 our App.js 文件,我们还导入了 App.css 文件在那里。
    现在将CSS文件导入到javascript中可能看起来很奇怪,但是要感谢wabpack,这是该React脚本包最终使用的构建工具。
    在react中导入CSS文件不会合并这两个文件,即CSS和JS等。只是知道该CSS文件并将以不同的方式处理它,它将导入到我们的HTML文件中。

    Import 的CSS 在 反应Component

    So 在 our person component we will import the 人.css 文件。

    src / Person / Person.js
    
    import 反应from 'react';
    import './Person.css';      // Imported 的CSS file
    const person = props => {
    	return (
    		 ...
    	);
    };
    export 默认 person;
    
    注意:
    如您在上面的代码中看到的那样,在导入CSS文件时,我们需要文件扩展名,但只能省略javascript文件。

    Now after saving all the files and run the application 在 the browser you can see the 风格 is been applied to our Person component.


    React中的内联样式

    现在让我们对按钮进行不同的样式设置,我想对按钮进行样式设置,这称为 内联样式。使用CSS文件和类没有错,这甚至可能是首选方式。但是您在react应用程序中也经常看到的是,您实际上是在用javascript设计样式。
    现在在 App.js will go 在to render() method 在 which we have implemented a button and 在side that will create a new const variable names as 风格. the name is upto you and that will be the javascript object and as yu might be aware the 的CSS 风格 properties have javascript representation. for example { backgroundColor: '#ededed' } camel case 在stead of a dash because {background-color : '#ededed'} would be 在valid.

    src / App.js
    
    ...
    class App extends Component {
    	 ...
    	render() {
    		const 风格 = {
    			background: '#ededed',
    			font: 'inherit',
    			border: '1px solid black',
    			padding: '8px',
    			borderRadius: '4px',
    			boxShadow: '0 2px 3px #ccc',
          cursor:'pointer',
    		};
    		return (
    			<div className="App">
    				<h1> Heading</h1>
            <button 风格={style} onClick={this.switchNameHandler}> {/* Adding dynamic Inline Style */}
    					Switch Name
    				</button>
    				 ...
    		);
    	}
    }
    export 默认 App;
    

    由于它不是style属性,因此它是一个普通变量,永远不会更改该render方法的常数。

    内联悬停限制

    现在,在进行悬停和样式设置时,它不会发生变化,使用内嵌样式时,很难产生悬停效果。这是一个限制,我已经在本课程中获得了一个完整的模块,在该模块中,我将向您展示一些巧妙的方式来设计React组件的样式,这确实是您可以深思熟虑的东西。
    Always be aware you can’t use a 的CSS file, then the 风格s defined 在 的CSS files are global. so if we change the button 风格 using button{ ... } there all the buttons 在 our whole app will be changed.
    因此,它可能不是您想要的,但另一方面,您可以使用普通的CSS语法,也可以使用内联样式(如上例所示),然后将样式范围限制为组件或添加到的元素。但是您有一些限制,无法利用CSS的全部功能。

    反应introduction
    反应Component
    在React中添加样式表和内联样式
  • 启用通知    不用了,谢谢