Adicionar Estilo ao Botão

Nas aplicações ReactJS, em vez de indicarmos a class usando o atributo class, usamos o atributo className.

Para podemos reutilizar o botão com vários estilos, vamos especificar uma classe que é passada pelo componente pai:

function Botao(props) {
    return (
        <button className={props.type} onClick={props.onClickHandler}>{ props.title }</button>
    );
}

export default Botao;

Vamos definir alguns estilos possíveis, por exemplo:

info
warning
danger

E agora, no ficheiro App.css podemos limpar os estilos que já vinham com o projecto-base e declará-los usando CSS - esta parte deve ser familiar:

button.info {
  background-color: cadetblue;
  color: white;
}

button.warning {
  background-color: khaki;
  color: black;
}

button.danger {
  background-color: tomato;
  color: white;
}

De volta ao componente FormularioTarefa, podemos passar o estilo que queremos ao botão:

import Botao from './Botao';

function FormularioTarefa() {
    return (
        <div>
            <input type="text" placeholder="Introduz a tua tarefa"/>
            <Botao type="warning" 
                   title="Adicionar" 
                   onClickHandler={() => alert("Alguém clicou no botão de adicionar tarefa")}/>
        </div>        
    );
}

export default FormularioTarefa;

O resultado, como podes ver, é que o botão é renderizado com a classe "warning":