![33b201d9e660ecbd95e3aeefa7381e9e.png](https://i-blog.csdnimg.cn/blog_migrate/76c24b0ca84b93e34dad1567dafd3ace.jpeg)
写样式的五种方式:
- 使用 style 内联创建
- 使用 class 的方式
- 动态的添加不同的 class
- styled-components
- styled-jsx(不推荐,做了解)
1、写样式的第一种方式:使用 style 内联创建
例子1--使用 style 内联创建
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color:'#F00'}}>元素中的样式</h1>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
结果:(红色h1大的字)元素中的样式
例子2--方法一的改进
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
const style={color:'#F00'}
return (
<div>
<h1 style={style}>元素中的样式</h1>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
结果相同
2、写样式的第二种方式:使用 class 的方式
注:在 react 中,class 要写成 className。
例子3--使用 class 的方式创建样式
首先,创建一个 index.css 文件,css 语法不知道的我就无能为力了
import React from 'react';
import ReactDOM from 'react-dom';
//有ccs文件就得引进来,才能用
import './index.css'
class App extends React.Component {
render() {
const style={color:'#F00'}
return (
<div>
<h1>元素中的样式</h1>
<ol>
<li style={style}>使用 style 内联创建</li>
<li className="has-text-red">使用 class 的方式,但是在 react 中,class 要写成 className</li>
</ol>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
![a790e438b9a73d113e071a0b66ad410b.png](https://i-blog.csdnimg.cn/blog_migrate/525b65ba1c8691755d33f165fc3d3580.png)
注意:
import'./index.css' 有ccs文件就得引进来,才能用。
它的意思是:当前文件夹下面的 index.css 文件,如果你的js和css文件没有放在同一个文件夹下,你就要自己写路径;路径有问题,可能就会引不进去。反正遵守规则放在同一级,写起来也方便是不是。
3、写样式的第三种方式:动态的添加不同的 class
思考一下,假如这里<li className="has-text-red">,需要多个 class,怎么办呢?
这个 class 里面:has-text-red",可以直接写成对象。满足一个条件,是一种样式;满足另一种条件,是另一种样式。
假如这里<li className="has-text-red">我想去动态的添加不同的 class,怎么做?
这时候我们会推荐一个 npm 提供的第三方的包,叫做:classnames(注意小写),它本身是一个方法,在里面可以添加任意字符串。
来,我们来安装一下啦
npm i classnames -S //i就是install,安装的意思
安装成功以后,咱们引入一下
import classNames from 'classnames'
注意:这里我要写一个方法,方法就是 JavaScript,所以要加 { }。(编辑的符号都是英文半角的,不要犯低级错误)
<li className={}>
例子4--动态的添加不同的 class(完整的代码)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import classNames from 'classnames'
class App extends React.Component {
render() {
const style={color:'#F00'}
return (
<div>
<h1>元素中的样式</h1>
<ol>
<li style={style}>使用 style 内联创建</li>
<li className="has-text-red">使用 class 的方式,但是在 react 中,class 要写成 className</li>
<li className={classNames('a',{'b':true,'c':false})}>动态的添加不同的 className,就会用一个 npm 提供的第三方的包,叫做classnames(注意小写)。比如这个li标签上就只有a,b,没有c。</li>
</ol>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
![e50c0cca8dc6b0e7e0448427e6d45da7.png](https://i-blog.csdnimg.cn/blog_migrate/55720bfa3bee8d51fa77e0370759f988.jpeg)
注意:这个是重点,就单独拿出来了
import classNames from 'classnames'
<li className={classNames('a',{'b':true,'c':false})}>
动态的添加不同的 className,就会用一个 npm 提供的第三方的包,叫做classnames(注意小写)。
比如这个li标签上就只有a,b,没有c。
</li>
4、写样式的第四种方式:styled-components
这种方式别人面试可能会问你,或者说是经常用到的一种方式
有些人认为样式组件就应该是同一的,怎么办呢?
npm 还给我们提供了一个第三方包,叫做:styled-components
就是用这种方式 styled-components,创建一个组件
npm 官网上的解释:
import styled from 'styled-components'; //引入
const Title = styled.h1` //创建 Title 组件,并写它的样式
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section` // `` 是模板字符串的一个语法,我发布的文章里有讲
padding: 4em;
background: papayawhip;
`;
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
来,先安装
npm i styled-components -S
例子5--写样式的第四种方式:styled-components(完整的代码)
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import styled from 'styled-components';
import './index.css';
//我用这种方式创建了一个组件
const Title=styled.h1`
color:#F00
`
class App extends React.Component {
render() {
const style={color:'#F00'}
return (
<div>
<Title>元素中的样式</Title>
<ol>
<li style={style}>使用 style 内联创建</li>
<li className="has-text-red">使用 class 的方式,但是在 react 中,class 要写成 className</li>
<li className={classNames('a',{'b':true,'c':false})}>动态的添加不同的 className,就会用一个 npm 提供的第三方的包,叫做classnames(注意小写)。比如这个li标签上就只有a,b,没有c。</li>
<li >styled-components 的使用</li>
</ol>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
![3c0717e6dcc52b20e06371d03771e968.png](https://i-blog.csdnimg.cn/blog_migrate/7c6a4af71292e93f094b26fb1d71472b.jpeg)
注意:styled-components 重点
import styled from 'styled-components';
//我用这种方式创建了一个组件
const Title=styled.h1`
color:#F00
<Title>元素中的样式</Title>
5、写样式的第五种方式:styled-jsx
这里提一下就好,用的人不多
安装一下先
npm install --save
接下来,将样式化的 jsx/babel 添加到 babel 配置的插件中:
{
"plugins": [
"styled-jsx/babel"
]
}
现在将 <style jsx>添加到代码中并用 CSS 填充:
export default () => (
<div>
<p>only this paragraph will get the style :)</p>
{ /* you can include <Component />s here that include
other <p>s that don't get unexpected styles! 这里可以包括其他没有意外风格的! */ }
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)
这种方式,个人觉得写起来比较乱,不推荐,提一下就好。
over