（三）学习笔记-styled-components的使用

简介

根据React的组件化开发思想，同时为了避免CSS的全局作用域的影响，对于组件即component的样式，我们采用css-in-js的方案。我们的项目中使用的是styled-components，它是目前 React 样式方案中最受关注的一种，它既具备了 css-in-js 的模块化与参数化优点，又完全使用CSS的书写习惯，不会引起额外的学习成本。

 

 

1.styled-components安装（样式不会全局，可在对应组件生效）

yarn add styled-components

 

2.styled-components全局样式createGlobalStyle

1）reset.css写法：

import { createGlobalStyle  } from 'styled-components';
 
const GlobalStyle = createGlobalStyle`
  	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
`
export default GlobalStyle

2）在全局的index.js中引用

import React from 'react';
import ReactDOM from 'react-dom';
import App from './view/App';
import GlobalStyle from './style';

ReactDOM.render(
  <React.Fragment>
    <GlobalStyle />
    <App />
  </React.Fragment>
  ,
  document.querySelector("#root")
);

3.styled-components组件样式+导入图片：

1）在相应的组件 文件夹下创建style.js

2）导入import styled from 'styled-components';

3）导入图片地址：import logoPic from '@/assets/img/login/logo_ec.png';

4）以div的形式注册名为Logo的组件

import styled from 'styled-components';
import logoPic from '@/assets/img/login/logo_ec.png';

export const Logo = styled.div`
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100px;
	height: 56px;
	background: url(${logoPic}) no-repeat;
	background-size: contain;
`;

5）在相应组件的 index.jsx中引用

import React from 'react';
import { XXXWrap } from "./style";

class MenuCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        ...
    };
  }

  render() {
    return (
      <XXXWrap>
        ...
      </XXXWrap>
    );
  }
}

然后就可以在该样式组件下随意发挥了，如

import styled from 'styled-components';

export const Wrap= styled.div`
	.class1{}
    .class2{}
    .class3{}
`;

 

4.styled-components组件样式中子类样式语法，和Sass相同;

下列代码是创建了个placeholder为'搜索'的<input />

export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
	width: 160px;
	height: 38px;
	padding: 0 30px 0 20px;
	margin-top: 9px;
	margin-left: 20px;
	box-sizing: border-box;
	border: none;
	outline: none;
	border-radius: 19px;
	background: #eee;
	font-size: 14px;
	color: #666;
	&::placeholder {
		color: #999;
	}
	&.focused {
		width: 240px;
	}
	&.slide-enter {
		transition: all .2s ease-out;
	}
	&.slide-enter-active {
		width: 240px;
	}
	&.slide-exit {
		transition: all .2s ease-out;
	}
	&.slide-exit-active {
		width: 160px;
	}
`;

5.styled-components中iconfont使用：

代码如下

///
icontfont.js中


import { createGlobalStyle } from 'styled-components';

const GlobalStyleFont = createGlobalStyle`
  @font-face {font-family: "iconfont";
    src: url('./iconfont.eot?t=1587899551505'); /* IE9 */
    src: url('./iconfont.eot?t=1587899551505#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('...') format('woff2'),
    url('./iconfont.woff?t=1587899551505') format('woff'),
    url('./iconfont.ttf?t=1587899551505') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./iconfont.svg?t=1587899551505#iconfont') format('svg'); /* iOS 4.1- */
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-guanbi:before {
    content: "\\e676";
  }

`
export default GlobalStyleFont


///
index.js中

import React from 'react';
import ReactDOM from 'react-dom';
import GlobalStyle from './style';
import GlobalStyleFont from '@/assets/fonts/iconfont/iconfont.js';
import App from '@/view/test/test.jsx';

ReactDOM.render(
  <React.Fragment>
    <GlobalStyle />
    <GlobalStyleFont />
    <App />
  </React.Fragment>
  ,
  document.querySelector("#root")
);

注意点：

1）类名转义

.icon-guanbi:before {

    content: "\e676";----------------》 content: "\\e676";

  }

2）url前加./,如下：

src: url('./iconfont.eot?t=1587899551505');

 

6.styled-components中样式组件传值：