🎯 回首頁

• 前端行動家_0428class
  • CSS 複習
  • styled-component
    • 安裝
    • 引入套件
    • 小試伸手
  • Icon

前端行動家_0428class

👉 程式碼下載

CSS 複習

👉 練習區

styled-component

安裝

$ npm install --save styled-components

引入套件

import styled from 'styled-components'

小試伸手

• try 1

const Title = styled.h1`
    color: #ccffff;
    font-size: 40px;
    text-align: center;
`;

const Wrapper = styled.div`
    background-color: #ff9933;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
`;

• try 2

const Button = styled.button`
    background-color: ${props => props.$primary ? "#008CBA" : "#4CAF50"};
    border: none;
    color: ${props => props.$primary ? "white" : "black"};
    padding: 15px 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
`;

• try 3

const Button = styled.button`
    background-color: #4CAF50;
    border: none;
    color: "black";
    padding: 15px 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
`;

const ButtonOne = styled(Button)`
    background-color: #f44336;
    color: "white";
`;

• try 4

const Input = styled.input`
    padding: 0.5em;
    margin: 0.5em;
    color: ${props => props.inputColor || "palevioletred"};
    background: white;
    border: solid 1px black;
    border-radius: 3px;
`;

• try 5

const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
    color: blue;

    &:hover {
        color: red; 
    }

    & ~ & {
        background: tomato; 
    }

    & + & {
        background: lime; 
    }

    &.something {
        background: orange; 
    }

    .something-else & {
        border: 1px solid; 
    }
`

function Dashboard(){
    return (
        <React.Fragment>
            <Thing> senrence 1 </Thing>
            <Thing> senrence 2 </Thing>
            <Thing className="something"> senrence 3 </Thing>
            <div> senrence 4 </div>
            <Thing> senrence 5 </Thing>
            <div className="something-else">
                <Thing> senrence 6 </Thing>
            </div>
        </React.Fragment>          
    );
}

Icon

$   npm install react-icons --save