废话不多话，来上车！安装： npm install –save styled-components （或者 yarn add styled-components）简述使用:1、 创建全局的样式：首先创建一个JS文件，例如style.js ①：import { createGlobalStyle } from ‘styled-components’ // 引全局包 ②：export const GlobalStyle = createGlobalStylemargin:0// ``里面为项目需要的css内容 ③：在react组件内 把引入的 GlobalStyle 当做标签写入 class App extends Component { render() { return ( <GlobalStyle></GlobalStyle> ); } } 创建一个局部的样式①：import styled from ‘styled-components’; // 引局部包 ②：export const HeaderWrapper = styled.div //里面为项目需要的css内容 ③：在react组件内 把引入的 HeaderWrapper 当做标签写入 class App extends Component { render() { return ( <HeaderWrapper></HeaderWrapper> ); } } 3、类嵌套：（类似于less sass用法大同小异）列举个项目实例： export const SearchWrapper = styled.div position:relative; float:left; .iconfont{ position:absolute; };4、增加属性写法： 举例给A标签增加attrs属性: export const Logo = styled.a.attrs({ href:’/’ }) 5、 设置当前元素内指定的class类 &.left{ float:left; } &::placeholder{ color:#999; }6、 styled-components 传值写法： 样式内js文件用props去接收 export const RecommendItem = styled.div background: url(${(props) => props.imgUrl}); ; react组件内给样式JS文件传入需要的地址 <RecommendItem imgUrl="http://xxxxx"/>7、常见小坑： 引图片不要直接写行内样式，默认会转化为字符串，导致加载图片失败，可用如下方式： import logoPic from '../../statics/logo.png'; export const Logo = styled.a background:url(${logoPic}); `;整理不易，喜欢的话就顺手点个赞吧，您的赞会是我们继续分享的动力 ！