ButtonAvaliarRecurso.js

import React from 'react'
import { Button } from '@material-ui/core';
import styled from 'styled-components'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

export default function ButtonAvaliarRecurso (props) {

    return (
        <StyledButton contrast={props.contrast} onClick={props.callback}>
            <ExpandMoreIcon style={{color: "white"}}/> AVALIAR RECURSO
        </StyledButton>
    )
}

const StyledButton = styled(Button)`
    &:hover {
        background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important;
    }
    background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
    border: ${props => props.contrast === "" ? "none" : "1px solid white"} !important;    
    color : ${props => props.contrast === "" ? "white" : "yellow"} !important;
    text-decoration : ${props => props.contrast === "" ? "none" : "underline"} !important;
    font-weight : 600 !important;
    box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
    .MuiSvgIcon-root {
        vertical-align : middle !important;
    }
`