react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式

在React中使用行内的css样式非常简单，举个例子：

class App extends Component {

render() {

const style = { color: 'red' }

return (

hello world

);

}

这样就可以个组件增加颜色了，可是，如果想给div增加:hover这样的伪类，或者media query该怎么做呢，React支持的内联样式好像处理不了这样的需求。

这个时候，我们可以借助Radium这个第三方的包帮助我们实现需求，在项目中npm install radium --save 安装好这个包之后，如果希望使用伪类，你可以这么来写代码了：

import Radium from 'radium'

class App extends Component {

render() {

const style = {

color: 'red',

':hover': {

color: 'green'

}

return (

hello world

);

}

export default Radium(App);

可以看到，Radium就是一个HOC，如果感兴趣，大家可以看看Radium的底层代码(radium包中src目录下的enhancer.js文件是高阶组件的实现代码)，学习下HOC的一些设计方法。

如果想在行内样式中实现媒体查询@media或者css动画@keyframes, 那么，你可以这么写代码：

import React, { Component } from 'react';

import Radium from 'radium'

class App extends Component {

render() {

const style = {

color: 'red',

':hover': {

color: 'green'

'@media (min-width: 400px)': {

background: 'orange'

}

return (

hello world

);

}

export default Radium(App);

当然，光这么写，代码会报错，如果你用到媒体查询或者css动画，需要在组件的父级组件上，包裹一层外层组件，代码如下：

import { StyleRoot } from 'radium'

ReactDOM.render(, document.getElementById('root'));

之所以这么传，是因为StyleRoot采用了context传值这个方式，只有子组件才能取到父组件在context中存的内容；而context中，恰好存储了这些媒体查询和动画样式。

好了，动手实验一下上面的代码，你就可以借助radium这个包，在React中更加方便的使用内联样式了。

react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式相关推荐

python内置函数range(a、b、s)的作用_python中，内置函数range(a,b,s)的作用是产生一个整数序列，从a到b....
python中,内置函数range(a,b,s)的作用是产生一个整数序列,从a到b. 答:错在生物性污染中范围最广.危害最大的污染是微生物的污染.(?) 答:对中国大学MOOC: Which of ...
css字体居中_简单介绍CSS.
CSS: (Cascading Style Sheets) 是用来样式化和排版你的网页的 -- 例如更改网页内容的字体.颜色.大小和间距,将内容分割成多列或者加入动画以及别的装饰型效果. 那么如何使用 ...
python内置对象是什么_#【Python】【基础知识】【内置对象常用方法】
数字的常用方法: >>> dir(int) ['__abs__', '__add__', '__and__', '__bool__', '__ceil__', '__class__' ...
绿联扩展坞拆解_用过才知道，华为P30搭配绿联扩展坞可实现众多有趣玩法
5月21日,荣耀于伦敦时间14点(北京时间21点)在伦敦举行发布会,带来了荣耀20系列新机,海外售价499欧元(约合人民币3840元)起,国内发布会将于月底举行. 荣耀20系列全系采用6.26英寸 L ...
python常用的内置对象有哪些_#【Python】【基础知识】【内置对象常用方法】
数字的常用方法: >>>dir(int) ['__abs__', '__add__', '__and__', '__bool__', '__ceil__', '__class__', ...
手机内置摄像头接线图解_这不是我们第一次听到有关GalaxyZFold3的内置摄像头的信息...
三星原本希望将其内置或内置摄像头技术引入其2021年的Galaxy S和Note设备.可悲的是,最近的报道与相同的可能性相矛盾.好吧,看起来财阀将在明年以某种方式带来这项技术.根据THE ELEC的一 ...
python协程异步原理_简单介绍Python的Tornado框架中的协程异步实现原理
Tornado 4.0 已经发布了很长一段时间了, 新版本广泛的应用了协程(Future)特性. 我们目前已经将 Tornado 升级到最新版本, 而且也大量的使用协程特性. 很长时间没有更新博客, ...
mysql 验证码过期时间_简单的行为控制管理方法，自动登录，session定时验证码过期...
public functionindex() {if(IS_POST) {//尝试登陆次数增加 behavior_function(__FUNCTION__, __CLASS__,1);}else{$ ...
confluence 字体_atlassian - 如何在Confluence中格式化内联代码？
atlassian - 如何在Confluence中格式化内联代码? 如何在Confluence like this中格式化inline code? 我的意思是,不是单独的代码块,而是内联classn ...
taro 引入js_Taro跨端开发之多业务模块管理 React Native篇(终篇)
React Native 热更新方案 rn的业务越来越庞大,同时协同的团队越来越多. rn的动态化就必须提上日程了. 对于rn热更新,首当其冲的问题就是分包. rn的基础库很大,再加上我们依赖了很多的 ...

react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式

react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式相关推荐

最新文章

热门文章

react里面 内联css样式怎么样_简单的使用Radium管理React中的内联样式

react里面 内联css样式怎么样_简单的使用Radium管理React中的内联样式相关推荐

最新文章

热门文章

react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式

react里面内联css样式怎么样_简单的使用Radium管理React中的内联样式相关推荐