DEV Community

Peiwen Li
Peiwen Li

Posted on

Daily Notes

#webdev #javascript #react #beginners

Originally written on 2020-04-15. DEV's displayed publication date reflects this archive migration.

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)