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

  • 30 – Adding and Using 镭 In 反应

    课程清单
    [在React中添加和使用Rad,在React中添加和使用Rad]

    因此,既然您学习了如何动态设置样式和类名,让我们回到内联样式的局限性中进行了解。
    Most important for us right now the fact that we can’t assign a :hover style of our button.
    :hover which in 的CSS you simply create with :hover and its is a pseudo selector which means it’s a selector based on some other selector indicate by that colon.
    但是我们无法在当前应用程序中分配该样式,因此我们在样式javascript对象中为按钮分配或创建了一些样式。
    因此,我们当然可以通过在CSS文件中设置按钮样式来解决此问题,但我已经提到,此样式将不仅限于此组件,并且所有按钮和我们的应用程序都将获得样式。
    是!我们可以使用一些唯一的CSS ID或类来解决此问题,但是使用内联样式的可能性也很酷,因为就像我们已经做的那样。
    您可以在代码中对其进行编辑,因为所有内容都是JavaScript。
    因此,如果我们在常规的javascript内联样式中使用伪选择器和媒体查询,那就太好了。
    为此,我们需要安装一个新的第三方软件包。

    在React中添加和使用Rad

    现在让我们安装一个名为的新pacakge 在我们的应用程序中

    重击
    
    npm install --save radium
    
    :
    镭是React的流行软件包,它允许我们使用内联样式以及伪选择器和媒体查询。

    After Install the first thing will do is import in App.js 文件。您可以导入任何 * .js 文件。

    src / App.js
    
    ...
    import 镭 from 'radium';
    ...
    

    Now whith that imported package you can go to the line where you export your app and there you can call 镭(App) as a function and wrap your app with it.

    src / App.js
    
    ...
    export 默认 镭(App);
    

    现在,它被称为高级组件,我们稍后将全部培训我们的课程项目。
    它看起来似乎很花哨,但最终,它只是一个包裹着您的组件的组件,并注入了一些额外的功能。
    在这种情况下,一些额外的语法将解析您的样式并了解您现在可以开始使用的一些额外功能。
    You can use 镭() on both class based component and function based components
    Now lets use some new features on our styles because 镭 is all about styles. the const style which will get assigned to the button at the end.

    src / App.js
    
    ...
    const style = {
    	backgroundColor: 'green',
    	font: 'inherit',
    	border: '1px solid black',
    	padding: '8px',
    	borderRadius: '4px',
    	color: 'white',
    	boxShadow: '0 2px 3px #ccc',
    	':hover': {          // Any sudo selectors you can use
    		backgroundColor: 'darkgreen',
    		cursor: 'pointer',
    	},
    };
    ...
    if (this.state.showPersons) {
    	...
    	style.backgroundColor = 'red';
    	style[':hover'] = { backgroundColor: 'salmon', cursor: 'pointer' };
    }
    

    运行您的应用程序,然后查看Radium的更改!

    反应introduction
    反应Component
    在React中添加和使用Rad
  • 启用通知    不用了,谢谢