如何将样式加入到react组件上



如何将样式加入到react组件上

一、使用行内样式

想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现:

// 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号
 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方,例如render函数里、组件原型上、外链js文件中

二、使用className(外部引用)

React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体

class需要写成className,class是js的关键字

<p className="hello" style = {this.style}>Hello world</p>

三、使用classname/classnames第三方包定义类名

有时候需要根据不同的条件添加不同的样式,比如:完成状态,完成是绿色,未完成是红色。

这种情况下,推荐使用classname/classnames这个包:

<p
    className = { 
        classname({
            size: true,
            bg: true
        })
    }
> 第三包classname定义 </p>

四、使用样式组件(styled-components)

styled-components是针对React写的一套css-in-js框架,简单来讲就是在js中写css。

styled-components是一个第三方包,要安装

const Container = styled.div`
    width: 100px;
    height: 100px;
    background: pink;
    color: white;
`
Image placeholder
前端答疑
未设置
  40人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

如何开发react组件库

如何开发react组件库技术栈:React+Webpack+TypeScript+Docz先上脚手架目录结构docz:docz文档生成器的配置目录example:demo目录lib:打包后生成文件目录

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

什么是react组件

什么是react组件组件就是页面上的一部分。我们可以把一个大的网页拆分成很多小的部分。比如标题部分,对应一个组件,就是标题组件。搜索部分,对应的组件就是搜索组件。页面上很多区域也可以拆分成组件,所以页

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

怎么在html中加入css样式

html添加css样式有三种方法,分别为行内式(使用style属性,在特定的HTML标签内使用)、内嵌式(style标签把css代码放在特定页面的head部分中)、外联式(使用link标签,将外部cs

使用kubei一步部署k8s高可用集群(包含docker安装、k8s组件安装、master初始化和加入nodes节点)

kubei(kubernetesinstaller)是一个go开发的用来部署kubernetes高可用集群的命令行工具,该工具可在Windows、Linux、Mac中运行kubei原理:通过ssh连接

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

如何在react加css样式?

react加css的3种方法:1.行内样式直接给对应的DOM元素添加style属性,遵循react的规则,写在{}当中。ThisisPage1!2.声明样式render(){   letmystyle

如何改变react的行内样式

如何改变react的行内样式在react中,可以这样来设置行内样式:render(){ conststyles={color:"red",fontSize:"16px"}; return( ); }

我如何将博客迁移到 Kubernetes(上)

最近Kubernetes的发展,以及在我司的大量应用,自己也迫不及待想要尝尝鲜,虽然我的博客是基于Hexo的纯静态站点,但这并不能阻挡我把它迁移上Kubernetes!毕竟...相比于GitHubPa

我如何将博客迁移到 Kubernetes(下)

前面的部分介绍了如何为我的博客打包Docker镜像,接下来就是重头戏——部署到Kubernetes。 GoogleKubernetesEngine 没错,我现在自用的Kubernetes集群就是

css如何将一行平均分成几列?

css如何将一行平均分成几列?column-count属性规定元素应该被划分的列数。它的取值可以是number|autonumber:元素内容将被划分的最佳列数。auto:由其他属性决定列数,比如"c

如何将网站的php版本信息隐藏起来

当我们把网站上线之后,我们可以通过curl的如下命令显示指定网站的头信息,curl的安装方法参考:https://www.wj0511.com/site/d...curl-Ihttps://www.w

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

css怎样给元素加入边框?

css怎样给元素加入边框?css给元素设置边框使用border属性,这是一个简写属性,分别是指边框的宽度、样式、颜色。它可以按顺序设置如下属性:border-widthborder-stylebord

新加入页面步骤

1.定路由Route::get('admin/login','Admin\LoginController@login');2.创建控制器(用来和用户操作对接)phpar