The backgroundColor vs background-color thing has nothing to do with React.

That is more JSS which is one attempt at CSS-in-JSS. The removed hyphen is needed because JSS requires property names as object property names where hyphens can be problematic.

Other CSS-in-JSS libraries, such as emotion.sh, has support for CSS (vs JSS above) inside of JS, including React components, and can keep default CSS syntax. Example from the emotion.sh homepage:

  const Link = styled.a`
    min-width: 12rem;
    margin: 0 auto 20px;
    padding: ${props => props.primary ? 18 : 16}px;
    border-radius: 5px;
    text-decoration: none;
    border: ${props =>
      props.primary ? 'none' : '3px solid currentColor'};
    background: ${props =>
      props.primary &&
      'linear-gradient(90deg, #D26AC2, #46C9E5)'};
    color: ${props =>
      props.primary ? '#1D2029' : '#D26AC2'};
    &:hover {
      opacity: 0.95;
    }
    @media (min-width: 768px) {
      margin: 0 20px 0 0;
      &:last-child {
        margin: 0;
      }
    }
  `

If you notice variables and props are available via string interpolation. emotion.sh also makes inline styling easier:

  render(
    <div
      className={css`
        background-color: hotpink;
        &:hover {
          color: ${color};
        }
      `}>
      This has a hotpink background.
    </div>
  )

[edited for formatting and word choice]