React jsx conditional styling of component

Question

I am conditionally styling my <input/> (standard HTML) component. I am passing inline JSX style as a style prop:

render() {
  return (
    <>
      <input
        type="text"
        style={{
          width: "100%",
          paddingLeft: "8px",
          paddingTop: "6px",
          paddingBottom: "6px",

          border: this.state.error
            ? "2px solid red"
            : this.state.value
            ? "2px solid #2684ff"
            : "2px solid hsl(0, 0%, 80%)",
          outline: "0px",

          "&:hover": {
            border: "2px solid green"
          }
        }}
        placeholder={this.props.placeholder}
        onChange={this.handleInput}
        onFocus={this.checkErrors}
        value={this.state.value}
        onBlur={this.sendData}
      />

      {this.state.error ? (
        <div className="errorMsg"> {this.props.errorMsg} </div>
      ) : null}
    </>
  );
}

My conditional styles work, and <input/> border colour changes based on this.state.error and this.state.value, however I can't get '&:hover' style to work. I have checked my .css and there is nothing overriding the style passed as props.

I have tried another approach, where I conditionally set className for my <input/> and define style in external .css file. It works and I can change border colour with:

    input[type="text"]:hover {
      border: 2px solid pink;
    }

However, I would like to make this work in inline JSX. Why does my style for '&:hover': { ... } not work?

See this - https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles. You could however use mouseover to add styles. — vivek, Jan 14 '20 at 11:28
You could find the answer in this post https://stackoverflow.com/a/28369384/5789381 — F-Fardin, Jan 14 '20 at 11:40

score 3 · Accepted Answer · answered Jan 14 '20 at 14:19

3

The "&" operator mean the current selector in preprocessing language like sass:

input {
  &:hover {
    background: red;
  }
}

Will compile to:

input:hover {
  background: red;
}

But you will have to use sass or styled component to use that sync tax.

answered Jan 14 '20 at 14:19

Thanh Thanh

188
1
7

Thanks! I was puzzled why the same styling worked for my other component based on `react-select`. I discovered that `react-select` uses `@emotion/core` to handle the styling. Since I already used `@emotion/core` in my other component, I solved the issue by 1. `import { jsx } from @emotion/core`, 2. adding jsx pragma `/** @jsx jsx */` and 3. changing the prop name from `style` to `css`. – soundust Jan 14 '20 at 15:22

gadi tzkhori · Answer 2 · 2020-01-14T14:17:22.277

Pseudo css selectors don't work in inline style.btw I would not recommend any of the js solution in the comments above .you need a more a robust css solution to handle all kind of pseudo selectors. Your options are:

Use css in js solution like styled-components.https://styled-components.com/
Use regular css or scss and condionaly switch classNames.You can utilize classnames library for easier experience.https://www.npmjs.com/package/classnames
Render style tag above your input and put your input styles there.quite bad practice and ugly.

React jsx conditional styling of component

2 Answers2