---
title: 前端行動家 0428
tags: 前端行動家
---
:::info
[🎯 回首頁](https://hackmd.io/@futurenest/frontend_all)
:::
[toc]

# 前端行動家_0428class

👉 [程式碼下載](https://drive.google.com/drive/folders/1kgTbaFl73grlSJKhjONcgLw5s0ph3pJA?usp=share_link)

## CSS 複習
[👉 練習區](https://flexboxfroggy.com/)

## 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