浅谈styled components|博客系列 | 前端进阶之旅

# 一、简介

styled components一种全新的控制样式的编程方式，它能解决CSS全局作用域的问题，而且移除了样式和组件间的映射关系

我们要理清一件事情：styled-components 只是 CSS 层面的高度抽象。它只是解析定义在 JavaScript 中的 CSS，然后生成对应 CSS 的 JSX 元素

import React from 'react';
import styled from 'styled-components';
import { render } from 'react-dom';
 
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;

WrapSearchBox=styled.div`
    width : 200px;
    // 媒体查询
    @media (max-width : 800px){
    	width : 100%;
    	padding-left:15px;	
    	margin-top:-14px;
    }
    >div{
    	@media (max-width : 800px){
    		width : 100%  !important;
    	}
    }
    >div>input {
    	width:200px !important;
    	padding-left:25px !important;
    	@media (max-width : 800px){
    		width : 100%  !important;
    	}
}
`
 
class App extends React.Component {
    render() {
        return (
            <Title>Hello world</Title>
        )
    }
}
 
render(
    <App />,
    document.getElementById('app')
);

@前端进阶之旅: 代码已经复制到剪贴板

styled.h1是一个标签模板函数

styled.h1函数返回一个React Component，styled components会为这个React Component添加一个class，该class的值为一个随机字符串。传给styled.h1的模板字符串参数的值实际上是CSS语法，这些CSS会附加到该React Component的class中，从而为React Component添加样式

# 二、基于 props 定制主题

const Button = styled.button`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>