CSS

color

配色

https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=4
https://chartio.com/learn/charts/how-to-choose-colors-data-visualization/#qualitative-palette

random dark background color

const randomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

or

const randomColor = () => {
  return "#" + Math.floor(Math.random() * 16777215).toString(16);
};

or

const color = `#${Math.floor(Math.random() * 10)}${Math.floor(
  Math.random() * 10
)}${Math.floor(Math.random() * 10)}`;

color transparent

rgba(0,0,0,0.5)

chart

https://recharts.org/zh-CN

如何让多个 children 的某一个自动占满剩余空间

https://dev.to/hmintoh/setting-child-container-fill-parent-container-s-width-and-height-1gdf

.parent {
  display: flex;
  flex-direction: column;
}

.children1 {
  flex: 1;
}

.children2 {
  height: 2rem;
}

css 里单位的区别

https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/

Icon

icon source can be found here: https://www.iconfont.cn/

首页左上角的 icon, 可以这样写:

import logo from "./logo.png";

<div
  className="logo"
  style=\{\{
    backgroundImage: `url(${logo})`,
    backgroundRepeat: "no-repeat",
    backgroundSize: "contain",
  \}\}

css 可以写固定 pixel 的宽高

.logo {
  float: left;
  width: 40px;
  height: 40px;
  margin: 16px 24px 16px 0;
}

CSS Animation

https://www.w3schools.com/css/css3_animations.asp
we can use transition style to make animation

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

it means the width will change from 100px to 200px in 2s.

in the React App, reference this article: https://medium.com/hackernoon/5-ways-to-animate-a-reactjs-app-in-2019-56eb9af6e3bf