Assign two className to child

Question

I have below code in my parent's component -

<Button className={'row1 column1'} value={'1'}/>

So I am sending two className to the child's component. Then in my child component I have

    render() {
        var { value, className, ...other} = this.props;
        return (
          <button className={s[className]}> {value} </button>
        )
      }
}
export default withStyles(s)(Button);

usually I manually set className={s.something} and it works, but this is not. In rendered html it looks like - <button is="null"></button> Any idea?

Answer 1

Supposed you use react-with-style, withStyles will add a styles object to your props.

This object does not know any classNames, you just need to pass those styles to your button as inline styles.

e.g.:

render() {
  var { value, className, style, ...other} = this.props;
  return (
    <button
      className={ className }
      style={ style }
    >
      { value }
    </button>
  )
}

EDIT: The advantage of withStyle is to use inline styles. And I suppose your s object does not have a key row1 column1 but rather row1 and column1, so you would need to manually split the classname.

But then again, why do you want the styles in the className?