react classname多个_教程4—— react 组件中的样式

写样式的五种方式：

• 使用 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')
);

结果在这里，就是这个样子滴

注意：

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')
);

结果就是这样的，没有截完，只看重要的

注意：这个是重点，就单独拿出来了

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')
);

结果

注意：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