浅谈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&
