styled-components初识

1、基础用法

     在react 中使用 styled-components

import styled from 'styled-components';

const ListWrap = styled.ul`
    margin: 0;
    padding: 0;
`;

const Item = styled.li`
    margin: 10px 0;
    padding: 5px 15px;
    border-left: 3px solid #333;
    font-size: 16px;
    list-style: none;
    font-weight: bold;
`

当我们将这个styled的li元素赋给了Item这个变量时,我们也就创建了一个叫Item的React组件。因此,我们可以在JSX中直接使用

import React, {Component} from 'react';

export default class List extends Component {
    render() {
        return (
            <ListWrap>
                <Item>这是一条普通的记录</Item>
                <Item>这也是一条普通的记录</Item>
            </ListWrap>
        )
    }
}


我们还可以在里面写js 比如像这样:


const Item = styled.li`
    margin: 10px 0;
    padding: 5px 15px;
    border-left: 3px solid #333;
    font-size: 16px;
    list-style: none;
    font-weight: bold;
    text-decoration: ${props => props.underline ? 'underline' : 'none'};
`;

export default class List extends Component {
    render() {
        return (
            <ListWrap>
                <Item>这是一条普通的记录</Item>
                <Item>这也是一条普通的记录</Item>
                <Item underline>这条记录有一条下划线</Item>
            </ListWrap>
        )
    }
}

在组件里面我们可以通过props获取传入的数据

2、拓展样式

有些时候,我们想要在已有的组件样式基础上,添加一些其他的样式属性,从而创建一个新的组件。

例如,对于上面的Item组件,我们想要在此基础上,创建一个红底白字的新Item样式,但是其他属性(字体、边距等)保持一致。使用styled-components的styled方法可以很容易实现:

const RedItem = styled(Item)`
    color: #fff;
    background: #991302;
`;

export default class List extends Component {
    render() {
        return (
            <ListWrap>
                <Item>这是一条普通的记录</Item>
                <Item>这也是一条普通的记录</Item>
                <Item underline>这条记录有一条下划线</Item>
                <RedItem>这是一条红色的记录</RedItem>
            </ListWrap>
        )
    }
}


3、继承样式

在styled-components中,对于组件的样式继承可以使用extend方法。因此,对于上面的RedItem组件,我们也完全可以使用extend

const RedItem = Item.extend`
    color: #fff;
    background: #991302;
`;

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容