React className naming convention - reactjs

Question

As we know, we are supposed to use lowercase and dash for css class name in raw html (e.g. <div class="lower-case-dash" />). What about in React JSX?
For html elements and other React components, what is the naming convention for css class name? camelcase or dash?
<div className="divClass">Something</div>
<div className="DivClass">Something</div>
<div className="div-class">Something</div>
<SomeComponent className="SomeComponent" />
<SomeComponent className="some-component" />

Answer 1

TLDR: PascalCase and Block__Element--Modifier
Check out the official doc of create-react-app. It provides a minimum example of creating a custom component. The js and css filenames as well as the className are all following PascalCase.
// Button.css
.Button {
padding: 20px;
}
// Button.js
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render() {
// You can use them as regular CSS styles
return <div className="Button" />;
}
}
Besides, the doc also provides an external link, which describes BEM naming conventions (link) for elements inside the component.
// MyComponent.js
require('./MyComponent.less');
import { Component } from 'react';
export default class MyComponent extends Component {
render() {
return (
<div className="MyComponent">
<div className="MyComponent__Icon">Icon</div>
...
</div>
);
}
}
// MyComponent.less
.MyComponent__Icon {
background-image: url('icon.svg');
background-position: 0 50%;
background-size: fit;
height: 50px;
}

Answer 2

Some of the naming conventions (Recommended) are:
Component Name
Component name should be in PascalCase.
For example, MyComponent, MyChildComponent etc.
Attributes
Attribute name's should be camelCase.
For example, className, onClick etc.
Inline styles
Inline styles should be camelCase.
For example, <div style={{color: 'blue', backgroundColor: 'black', border: '1px solid', borderRadius:'4px'}}>My Text</div> etc.
Variable Names
Variable names can be camelCase (Good practice), PascalCase (Avoidable), lowercase, can also contain number and special characters.
For example, state = {variable:true, Variable:true, variableName:true} etc.
Class Name
Class names can be anything camelCase, PascalCase, lowercase, can also contain number and special characters, because after all it is a string.
For example, className="myClass MyClass My_Class my-class" etc.

Answer 3

That totally depends on your (and your team's) preference. React (nor plain HTML) doesn't restrict you from using lower, dashed or camel-cased class names.
However, I would recommend that you choose an existing CSS convention like BEM. This will make sure that class names stay consistent throughout the process (if followed correctly).
We've chosen for a custom convention in our projects to match our components class names with the component name.
Example:
const NavBar = () => (
<header className="NavBar NavBar--fixed">
<div className="NavBar-brand"></div>
</header>
);
As you can see, this looks a lot like BEM, except for the pascal-cased block, single dash separator for elements and a double dash separator for block modifiers.