if else syntax

I am trying to create button with styling attributes,

This is not very conveniant but it work.

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  color: ${props =props.theme.atoms.Button.default.color};
  background: ${
  (props) =>
    // if primary
    props.primary ? props.theme.atoms.Button.primary.background :
    // else if success
    props.success ? props.theme.atoms.Button.success.background :
    // else if success
    props.info ? props.theme.atoms.Button.info.background :
    // else if warning
    props.warning ? props.theme.atoms.Button.warning.background :
    // else if danger
    props.danger ? props.theme.atoms.Button.danger.background :
    // else default
    props.theme.atoms.Button.default.background
  }
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

Also eslint is now complaining:

/workspace/github.com/mxstbr/react-boilerplate/app/components/atoms/Button/index.js
   6:12  error  Expected parentheses around arrow function argument            arrow-parens
   8:3   error  Arrow function used ambiguously with a conditional expression  no-confusing-arrow
  10:5   error  Do not nest ternary expressions                                no-nested-ternary
  12:5   error  Do not nest ternary expressions                                no-nested-ternary
  14:5   error  Do not nest ternary expressions                                no-nested-ternary
  16:5   error  Do not nest ternary expressions    

I guess there must be a better way.

Thanks in advance for informing me

[mxstbr]

Why not do something like this:

const Button = styled.button`
  background: ${props => props.theme.atoms.Button[props.nature].background};
  /* More styles here */
`;

Then you can use your different button styles like this:

<Button nature="primary" />
<Button nature="warning" />
// etc.

You might now think “but now people can pass wrong values (or even nothing!) into the style prop”, and you’d be right – except we’re talking about a react component, which can have propTypes and defaultProps! 🎉

Button.propTypes = {
  nature: React.PropTypes.oneOf(['primary', 'success', 'info', 'danger', 'warning'])
}

Button.defaultProps = {
  nature: 'default',
}

Boom, done, exact same behaviour as your really long ternary expression except much neater 😊

Does that answer the question?

*Edited to reflect the correct observation by @kopax that style is a reserved property in react, so I changed it to nature as to not confuse future readers.`

[kopax]

Your example to create a styled component involve a syntax like this :

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

It mean if you need to add method you will have to write something like this :

Title.prototype.render = function(){
        .....
}

Instead of storing in a ES6 class. it would be nice to write the css inside a class syntax.

class Title extends styled.h1 {

          // <- put the css function somewhere inside this
}