Styling scrollbar

-> WebKit customisation of scrollbars: explains the composition of a scrollbar
-> another css-tricks post

An example:

body::-webkit-scrollbar {
  width: 1em;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

flex grow & overflow scroll conflict

Sometimes overflow scroll wouldn’t work in safari when flexbox is involved. This post is where I found the solution to solve this problem.

Simple solution is that you need to add overflow: scroll to whichever container holds the scrollable content. Meanwhile, this container can not be a flexbox.

More solution in this SO Post

to capitalize text with CSS text-transform

.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}

React.cloneElement

When you want to pass a prop to undifined children elements, you can, instead using {children}, try {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}
From SO Post