React实战——css组件化

前言：如果css不实现组件化管理的话，可能会起到冲突，如命名冲突等

目录：

1、下载安装 styled-components

npm install styled-components -D

2、全局样式

在 src 下创建 styled.js 文件，并在 index.js 中引入 styled.js

import {
          
    createGlobalStyle } from styled-components

export const [自定义标签名] = createGlobalStyle`
	[全局样式]
`;

在你要的组件中引入，并使用标签，这个标签下的都可以适用这个全局样式

import {
          
    [自定义标签名] } from ...

render(){
          
   
	return (
		<[自定义标签名] />
		{
          
   /*下面的标签都可以适用全局样式*/}
	)
}

3、组件内样式

创建独立的 styled.js，一般在组件的同层目录下创建，并在组件中引入 styled.js 语法：

import styled from styled-components 

// attrs 可以添加属性，没有也可以不加
export const [自定义标签的名字] = styled.[标签].attrs({
          
   
	[属性名]:[属性值]
})`
	[普通css代码]
	&[这个标签同级的css选择器] —— 如：&.other{}
	&::[伪选择器] —— 如：&::after{}
`

例子：

import styled from styled-components 
import logoimg from ../../static/logo.png // 引入图片

export const Logo = styled.a.attrs({
          
   
    href: /
})`
    width:100px;
    height:100px;
    background:url(${
            
     logoimg});
    background-size:contain;
`

组件类引用

import React, {
          
   Component} from react
import {
          
    Logo } from ./styled.js

class Test extends Component{
          
   
	render(){
          
   
		return(
			<Logo></Logo>
		)
	}
}

export default Test