Question

182

Setting Complex react inline styles such as hover, active on react components such as button

rated 0 times [ 184] [ 2] / answers: 1 / hits: 59152 / 8 Years ago, mon, august 1, 2016, 12:00:00

I have the following styles in css for my buttons. I am also using bootstrap.

.btn-primary {

    background-color: #229ac8;

    background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);

    background-repeat: repeat-x;

    border-color: #1f90bb #1f90bb #145e7a;

    color: #ffffff;

    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {

    background-color: #1f90bb;

    background-position: 0 -15px;

}

I have defined a button as a component in react.

const MyButton = ({children, onClick, classNames, ...rest }) =>

(

    <button

        onClick   = {onClick}

        className = {`${classNames}`}

        {...rest}

    >

        {children}

    </button>

);

Based on some value fetched from the server I want to change the complete color of the button.

Question 1:

How can I set the button's complete style as inline style?

Question 2:

Also, can I use some scss features like mixins in react to generate button styles dynamically passing color as variable ?

Question 3:

Should I use inline styles or classnames using css in js?

For a generic component such as a button should we use a global class which can be reused in all places where button is defined or use a local inline style and create inline styles in all places?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramiro

Add To Favorites

Follow

Total Points: 431

Total Questions: 96

Total Answers: 105

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 8 Years ago domeniccolti · Accepted Answer

CSS in JS (with pseudo classes & MQ support)

There are lots of libs to write CSS with React that supports pseudo classes but all, if not all of them requires you to inline or write your CSS in JS Which I highly recommend

CSS Modules (Write your CSS as normal, but in a better way)

There is also CSS modules which if you are already using Webpack should be simple to set it up, which let you import/require your CSS as an object use it your component like so:

import styles from './Button.css'



const MyButton = ({children, onClick, type='primary', ...rest }) =>

(

    <button

        onClick   = {onClick}

        className = {styles.primary}

        {...rest}

    >

        {children}

    </button>

);

Decoupling your components

I'd also add that you shouldn't pass classes to the <Button /> and deal with the conditions inside the component itself. For example using classnames lib you can do something like the following.

import classnames from 'classnames'



const MyButton = ({children, onClick, type='primary', ...rest }) =>

(

    <button

        onClick   = {onClick}

        {/* 

          depends on the type prop, you will get the relevent button 

          so no need for consumers to care about the internals of the component

        */}

        className = {classnames('.btn', { [`btn-${type}`]: true })}

        {...rest}

    >

        {children}

    </button>

);

You can even combine CSS Modules & classnames lib to create some powerful combinations.