styled-components

2018-07-22  本文已影响164人  指尖轻敲

styled-components是目前React中非常受关注的一种样式方案,既实现了css-in-js的模块化优点,移除了样式和组件之间的映射关系,又完全使用了CSS的书写习惯。使你使用起来几乎0门槛。

使用文档

安装

npm install --save styled-components

使用

最简单实现
import styled from 'styled-components';
const H1 = styled.h1`
  background-color: #a1a
`;

class App extends Component {
  render() {
    return (
      <div className="App">
        <H1>nihao</H1>
      </div>
    );
  }
}

用styled.*定义一个组件,然后使用模板字符串,在里面直接写CSS样式就可以。使用组件出现下面效果,可以看到样式已经生效了。

image.png
伪选择器

如果需要添加伪选择器怎么办呢?可以使用&符号。比如要加上一个鼠标滑的效果,可以这样写:

const Btn = styled.button`
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: none;
  background-color: #ccc;
  &: hover{
    color: red;
  }
`;

当然,也支持直接写媒体查询语句等等,就和写CSS是一样的。

const Input = styled.input`
  font-size: 1.25em;
  border: none;
  /* ...more styles here... */
  @media (min-width: 650px) {
    font-size: 1.5em;
  }
`;
props控制样式

之前的方法是通过className来控制组件样式的显隐。现在既然消除了样式和组件之间的映射,当然不会再用这种方法了。使用props来控制样式。

const H1 = styled.h1`
  background-color: #a1a
  color: ${props => props.redFont ? 'red' : 'black'};
`;

<H1 redFont>nihao</H1>

当有redFont属性的时候,样式里面会判断显示红色字体,没有则是黑色。

嵌套

当然styled-components也支持样式嵌套,但是能不用就不要使用。

onst Example = styled.div`
  padding: 2em 1em;
  background: papayawhip;

  > p {
    text-decoration: underline;
  }

  html.test & {
    display: none;
  }
`;

render(
  <Example>
    <p>Hello World!</p>
  </Example>
);
全局样式

如果要设置全局样式,可以引入injectGlobal方法,在这个里面写就可以了。

import styled, {injectGlobal} from 'styled-components';

injectGlobal`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`
帧动画keyframes

如果要是keyframes也需要单独引入一个keyframes方法。

import styled, {keyframes} from 'styled-components';
const scaleFont = keyframes`
  from{
    font-size: 16px;
  }
  to{
    font-size: 26px;
  }
`;
const H1 = styled.h1`
  background-color: #a1a
  animation: ${scaleFont} 1s ease-out;
`;
主题辅助组件(上下文传值)

通过上下文API可以将主题值传递给组件树中任何组件。

import styled, { ThemeProvider } from 'styled-components';

const Box = styled.div`
  color: ${props => props.theme.color};
`;

<ThemeProvider theme={{ color: 'mediumseagreen' }}>
  <Box>I'm mediumseagreen!</Box>
</ThemeProvider>

编译后是什么样?

可以看到,最后渲染出来的样子是给元素添加了一个随机串的class,这样可以有效的避免全局css样式的污染。

image.png
上一篇 下一篇

猜你喜欢

热点阅读