使用styled-components实现CSS in JS

2018-06-24 01:40:03来源：未知阅读 ()

前面的话

　　使用jsx语法可以实现HTML in JS，使用svgr可以实现svg in JS，使用styled-components可以实现CSS in JS。这样，使用react开发，就变成了使用JS开发，统一且方便。本文将详细介绍styled-components的用法

基本用法

【安装】

$ npm install styled-components

　　使用非常简单，下面的代码片段展示了 React 项目中使用 styled-components，定义了 Wrapper 和 Button 两个组件，包含了 html 结构和对应的 css 样式，从而将样式和组件之间的 class 映射关系移除

import styled from 'styled-components';
const Wrapper = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`;
const Button = styled.button`
  width: 100px;
  color: white;
  background: skyblue;
`;
render(
  <Wrapper>
    <Button>Hello World</Button>
  </Wrapper>
);

组件样式

　　如果要为组件设置样式，则需要使用小括号语法，而且需要在组件上设置className和children

const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
)
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;
render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

扩展样式

　　使用扩展样式，可以基于已经存在的样式进行扩展

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = Button.extend`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

更换标签

　　在某些情况下，可以在复用样式的基础上更换标签

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
const Link = Button.withComponent('a')
const TomatoLink = Link.extend`
  color: tomato;
  border-color: tomato;
`;
render(
  <div>
    <Button>Normal Button</Button>
    <Link>Normal Link</Link>
    <TomatoLink>Tomato Link</TomatoLink>
  </div>
);

传递属性

　　通过props可以从父组件向子组件传递属性

const GlassModal = ({ children, className, backgroundColor, padding }) => (
  <Wrap backgroundColor={backgroundColor}>
    <Main padding={padding} className={className}>
      {children}
    </Main>
  </Wrap>
)
export default GlassModal

const Wrap = styled.section`
  background-color: ${props => props.backgroundColor || BLUE_DARK};
`
const Main = styled.main`
  padding: ${props => props.padding || '0'};
  background-color: ${OPACITY_LIGHT};
`

const StyledGlassModal = styled(GlassModal)`
  padding: 20px 10px;
  text-align: center;
`

　　或者，基于prop来定制主题

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>
  </div>
);

attrs函数

　　通过使用attrs函数，可以用来设置其他属性

const Input = styled.input.attrs({
  type: 'password',
  margin: props => props.size || '1em',
  padding: props => props.size || '1em'
})`
  color: palevioletred;
  border-radius: 3px;
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;
render(
  <div>
    <Input placeholder="A small text input" size="1em" />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

　　或者引入第三方库的样式，如activeClassName

const Button = styled.button.attrs({
  className: 'small',
})`
  background: black;
  color: white;
`;

　　编译后的 html 结构如下：

<button class="sc-gPEVay small gYllyG">
  Styled Components
</button>

动画

　　styled-components 同样对 css 动画中的 @keyframe 做了很好的支持

import { keyframes } from 'styled-components';

const rotate360 = keyframes`
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
`;
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate360} 2s linear infinite;

`;
render(
  <Rotate>&lt; ?? &gt;</Rotate>
);

添加类名

　　有时，会在为元素添加类名，并在该类名下设置样式的需要

<Wrap className="test">

const Wrap= styled.div`
  &.test{
　　color: white;
  }
`

　　或者，覆盖组件内部样式

<Wrapper>
  <h4>Hello Word</h4>
  <div className="detail"></div>
</Wrapper>

const Wrapper = styled.div`
 & .detail {
   color: #ccc;
 }
`;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：前端性能核对表Checklist-2018

下一篇：Ant Design项目记录和CSS3的总结和Es6的基本总结

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签