浅谈styled

日期：2020-12-12 类型：科技新闻我要分享

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

styled components 1种全新升级的操纵款式的程序编写方法，它能处理 CSS 全局性功效域的难题，并且移除款式和组件间的投射关联

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;
`;
 
class App extends React.Component {
    render() {
        return (
            <Title>Hello world</Title>
        )
    }
}
 
render(
    <App />,
    document.getElementById('app')
);

styled.h1 是1个标识模版涵数

styled.h1 涵数回到1个 React Component ， styled components 会为这个 React Component 加上1个 class ，该 class 的值为1个任意标识符串。发送给 styled.h1 的模版标识符串主要参数的值具体上是 CSS 英语的语法，这些 CSS 会额外到该 React Component 的 class 中，从而为 React Component 加上款式

2、根据 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>
  </div>
);

大家在组件中传入的全部 props 都可以以在界定组件时获得到，这样便可以很非常容易完成组件主题的订制。假如沒有 styled-components 的状况下，必须应用组件 style 特性或界定好几个 class 的方法来完成

3、组件款式承继

一般在 css 中1般会根据给 class 传入好几个 name 根据空格隔开的方法来复用 class 界定，相近 class="button tomato" 。在 styled-components 中运用了 js 的承继完成了这类款式的复用：

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;
`;

子组件中的特性会遮盖父组件中同名的特性

4、组件內部应用 className

在平常开发设计中总会出現遮盖组件內部款式的要求，你将会想在 styled-components 中应用 className ，或在应用第3方组件时。

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

5、组件中维护保养别的特性

styled-components 另外适用为组件传入 html 元素的别的特性，例如为 input 元素特定1个 type 特性，大家可使用 attrs 方式来进行

const Password = styled.input.attrs({
  type: 'password',
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

在具体开发设计中，这个方式也有1个有效处，用来引入第3方类库的 css 款式：

const Button = styled.button.attrs({
  className: 'small',
})`
  background: black;
  color: white;
  cursor: pointer;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

编译程序后的 html 构造以下：

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

能够用这类方法来应用在别处界定的 small 款式，或单纯性以便鉴别自身界定的 class ，由于一切正常状况下大家获得的 class 名是不能读的编号

6、CSS 动漫适用

styled-components 一样对 css 动漫中的 @keyframe 做了很好的适用。

import { keyframes } from 'styled-components';
const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`;

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`;

7、适配如今已有的 react components 和 css 架构

styled-components 选用的 css-module 的方式有此外1个益处便是能够很好的与别的的主题库开展适配。由于绝大多数的 css 架构或 css 主题全是以 className 的方法开展款式解决的，附加的 className 和主题的 className 其实不会有太大的矛盾

styled-components 的英语的语法一样适用对1个 React 组件开展拓展

const StyledDiv = styled(Row)`
  position: relative;
  height: 100%;
  .image img {
    width: 100%;
  }
  .content {
    min-height: 30em;
    overflow: auto;
  }
  .content h2 {
    font-size: 1.8em;
    color: black;
    margin-bottom: 1em;
  }
`;

缺陷

不可以用 stylelint 查验你的 Css 编码

在应用 styled-components 的全过程中也会遇到1些难题，例如大家的新项目会用stylelint来做款式编码的查验，可是应用了 styled-compoents 后就没法让stylelint的标准起效了。

不可以用 prettier 来文件格式化你的 Css 编码

如今prettier不但能够帮你文件格式化 JS 编码，还能够文件格式化 CSS 编码，但假如应用了styled-components的话，JS 中的标识符串模版內容沒有方法应用prettier来文件格式化，这个也较为难堪。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS3制做炫酷的条纹情况返回下一篇：css完成元素水平竖直垂直居中普遍的两种方法案