# Day 20 - 動態調整 CSS - 行距

## Sample

1. [antd-progress](https://codesandbox.io/s/antd-progress-bar-issue-71974731-bowuu6?file=/src/App.js:326-339)
2. [antd-table-row-height](https://codesandbox.io/s/so-61044628-table-row-height-change-forked-sqdwwc?file=/index.css)

## Code

### App.js

<-- Add Radio --> 
import { Table, Button, Layout, Input, ConfigProvider,Radio } from "antd";
const [customStyle, setCustomStyle] = useState("py-style-2");
const [size, setSize] = useState('small');

const handleSizeChange = (e) => {
    setSize(e.target.value);
    if (e.target.value === "small") {
      setCustomStyle("py-style-2");
    } else {
      setCustomStyle("py-style-1");
    }
};

<Radio.Group value={size} onChange={handleSizeChange}>
  <Radio.Button value="large">Large</Radio.Button>
  <Radio.Button value="small">Small</Radio.Button>
</Radio.Group>

### App.css

.py-style-1 .ant-table-tbody > tr > td {
  padding: 50px;
}

.py-style-2 .ant-table-tbody > tr > td {
  padding: 20px;
}

## Result
### (1) default 為 small
### (2) 新增個幾列
### (3) 調成 Large

## push & deploy
- [commit-day 20 - 行距](https://github.com/goish135/table-tennis-king/commit/fc4a512472f2c55444265e863c61feba91230aea)
- [deploy#18](https://github.com/goish135/table-tennis-king/actions/runs/6394957999)

## (Optional) 挑戰
使用 [Slider](https://ant.design/components/slider) 調動`行距`