How to change the style of a React component when you click a button?

Here I comment on three ways to define style.

(1) Traditional way

  

Create an individual file for the style sheet that will be used throughout the app.

Problem: It may be that not all styles are used by the app or in case you make a reusable component, another consumer of your component will depend on the specific styles for your app

(2) CSS inline with style

  

Define the style of each inline component using prop style

Problem: Leaves style coupled with structure and implementation of elements. It may be less efficient than externally defined CSS. It should only be used in case external CSS does not solve the problem in mind.

(3) Separate CSS files for each component (my recommendation)

  

Define a CSS file for each component

I recommend this way because:

(a) separates style from implementation and implementation

(b) usually more efficient than inline

(c) files are separate but can be combined into one using a bundler like Webpack

(d) allows you to redistribute a reusable component without having to include a style sheet with rules that has nothing to do with the component in question.

Example

Button.js

import 'Button.css';

const Button = (props) => (
  <button type="button" className="btn">{props.children}</button>
);

Button.css

.btn {
  padding: 20px 30px;
}

/* mais outros estilos relacionado somente à esse componente */

The style is imported into the component itself. Bundlers like the Webpack allow you to do this. There is a plugin that extracts CSS from within the JS file as well.

Man, there is no secret, you will have a state to control the action of the click, with the click executing the state change the component will be re-invented, that is, it will go through the rendering method again ... just make a conditional in the className of the element you want to change with CSS.