CSS in JS 之 Styled-components 用法

npm i styled-components

基本用法

import React, { Component } from 'react'
import styled from 'styled-components'
export default class App extends Component {
    render() {
        const StyledFooter = styled.footer`
            background:yellow
        `
        return (
            <StyledFooter>
                <footer>
                    <ul>
                        <li>首页</li>
                        <li>列表</li>
                        <li>我的</li>
                    </ul>
                </footer>
            </StyledFooter>
        )
    }
}

支持sass/less语法

import React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {


    render() {
        const StyledFooter = styled.footer`
        background:yellow;
        position:fixed;
        left:0;
        bottom:0;
        width:100%;
        height:50px;
        line-height:50px;
        text-align:center;
        ul{
            display:flex;
            list-style:none;
            li{
                flex:1;


                &:hover{
                    background:red;
                }
            }
        }
        `
        return (
            <StyledFooter>
                <footer>
                    <ul>
                        <li>首页</li>
                        <li>列表</li>
                        <li>我的</li>
                    </ul>
                </footer>
            </StyledFooter>
        )
    }
}

可透传props 以及 基于props做样式判断


import React, { Component } from 'react'
import styled from 'styled-components'
export default class App extends Component {
    render() {
        const StyledInput = styled.input`
        outline:none;
        border-radius:10px;
        border-bottom:1px solid red;
        `


        const StyledDiv = styled.div`
         background:${props => props.bg || 'yellow'};
        `
        return (
            <StyledDiv bg={"lightblue"}>
                Apppppp
                <StyledInput type="password" ></StyledInput>
            </StyledDiv>
        )
    }
}

样式化任意组件

import React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {
    render() {
        const StyledChild = styled(Child)`
         background: yellow
        `
        return (
            <div>
                <StyledChild></StyledChild>
            </div>
        )
    }
}


function Child(props) {//子组件记得接收
    return (
        <div className={props.className}>//子组件记得接收
            Child
        </div>
    )
}

css的复用、扩展、增强

mport React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {
    render() {
        const StyledButton = styled.button`
         width:100px;
         height:100px;
         background:yellow;
        `
        const StyledButton2 = styled(StyledButton)`
        background:red;
       `
        return (
            <div>
                App
                <StyledButton></StyledButton>
                <StyledButton2></StyledButton2>
            </div>
        )
    }
}

添加动画 定义keyframes


import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'

export default class App extends Component {
    render() {
        const myanimation = keyframes`
         from{
             transform:rotate(0deg)
         }
         to{
            transform:rotate(360deg)
         }
        `
        const StyledDiv = styled.div`
         width: 100px;
         height: 100px;
         background: yellow;
         animation: ${myanimation} 1s infinite;
        `
        return (
            <div>
                <StyledDiv>
                </StyledDiv>
            </div>
        )
    }
}

有问题 欢迎发邮件 📩 liberhome@163.com

409 声望
1.1k 粉丝
0 条评论
推荐阅读
bug solved | export 'default' was not found in 'xxx'
原因:export 导出不止一个 需要用花括号解构出自己想要的例如:import Provider from 'mobx-react'改为import {Provider} from 'mobx-react'

LiberHome阅读 463

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.2k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.5k

封面图
与众不同的夜间开关交互效果
这个夜间模式切换开关效果是不是很炫酷,在短视频曾刷到过是一个国外的设计师看似是为了难为我们前端开发设计了一个元素超多且动画复杂的开关切换效果。

南城FE9阅读 1.3k评论 4

突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan9阅读 1.2k

封面图
了解一下全新的CSS动画合成属性animation-composition
欢迎关注我的公众号:前端侦探介绍一个在Chrome 112上刚刚正式推出的 CSS 动画合成属性:animation-composition[链接]日后非常有用的一个特性,快来了解一下吧一、从 CSS 抛物线运动说起众所周知,抛物线运动是一...

XboxYan9阅读 1.3k评论 2

封面图

有问题 欢迎发邮件 📩 liberhome@163.com

409 声望
1.1k 粉丝
宣传栏