Radium Reactjs Pseudo selectors

Question

I'm returning to coding after almost 2 years. I am fairly new to react. I am literally scratching my head to how to use the pseudo selector in react. I came across many answers to use Radium but it is just that I am not able to implement this in my code. Any help is appreciated.

Below is the React component:

import React from "react";
import Radium from 'radium';

const styles = {
    input[type="text"] : {
    box-sizing: border-box;
    width: 100%;
    height: calc(4em + 1px);
    margin: 0 0 1em;
    padding: 1em;
    border: 1px solid #ccc;
    background: #fff;
    resize: none;
    outline: none;
  },

  input[type="text"][required]:focus {
    border-color: #00bafa;
  },
  input[type="text"][required]:focus + label[placeholder]:before {
    color: #00bafa;
  },
  input[type="text"][required]:focus + label[placeholder]:before,
  input[type="text"][required]:valid + label[placeholder]:before {
    transition-duration: 0.2s;
    transform: translate(0, -1.5em) scale(0.9, 0.9);
  },

  input[type="text"][required]:invalid + label[placeholder][alt]:before {
    content: attr(alt);
  },

  input[type="text"][required] + label[placeholder] {
    display: block;
    pointer-events: none;
    line-height: 1em;
    margin-top: calc(-3em - 2px);
    margin-bottom: calc((3em - 1em) + 2px);
  },

  input[type="text"][required] + label[placeholder]:before {
    content: attr(placeholder);
    display: inline-block;
    margin: 0 calc(1em + 2px);
    padding: 0 2px;
    color: #898989;
    white-space: nowrap;
    transition: 0.3s ease-in-out;
    background-image: linear-gradient(to bottom, #fff, #fff);
    background-size: 100% 5px;
    background-repeat: no-repeat;
    background-position: center;
  }

};

const GmailInput = () => {
 return (
    <div>
      <form>
       <input type="text" />
       <label placeholder="Type your Email" />
      </form>
    </div>
 );
 };

 export default Radium(GmailInput);

Pritthish Nath · Answer 1 · 2019-06-26T16:28:18.087

Follow the syntax..

import React from "react";
import { StyleRoot } from "radium";

const GmailInput = props => {
  const styles = {
    boxSizing: "border-box",
    width: "100%",
    height: "calc(4em + 1px)",
    margin: "0 0 1em",
    padding: "1em",
    border: "1px solid #ccc",
    background: "#fff",
    resize: "none",
    outline: "none",
    ":hover": {
      borderColor: "#00bafa"
    }
  };

  return (
    <StyleRoot>
      <div>
        <form style={styles}>
          <input type="text" placeholder="Type your Email"></input>
        </form>
      </div>
    </StyleRoot>
  );
};

export default GmailInput;

Understanding,

You have to put all of the variables in the main body of the component.
As you are using Functional-based components the {StyleRoot} is required for pseudo styling using Radium.
Please learn about, how to styling using JavaScript in React. Though styling properties are CSS, but when you are writing in JS, those are only JS objects. React compiler compile them into CSS styling.
JSX style attribute is required for styling see the style={styles} , styles is the varible here.
Radium(Com_name) is for the class-based component. it doesn't require for functional-based components, but return in StyleRoot is mandatory.
CSS syntax with "-" like box-sizing, will be typed through camelCasing, like boxSizing.

(Didn't write the all your css properties here, only to show you the concept. This syntax has been compiled successfully)

Radium Reactjs Pseudo selectors

1 Answers1