React-boilerplate: Q: sanitize.css and styling of input elements

[PatrLind]

I'm not sure this is the right place to ask this question, please forgive me if it is not.

Anyway, I'm trying to do a project with this boilerplate and while trying to create some simple forms for data I came upon the problem of styling for form input fields.
As I understand it sanitize.css remove all styling including all the styles from input boxes. This makes them become invisible unless you put a mouse cursor inside it. I guess this is good for using your own styles, but I just want them to look somewhat ordinary.
But... when styling them it seems that I need to put !important after some of the styles in order for them to do anything. This is annoying and it certainly doesn't feel like a good solution.

Maybe I am doing things wrong?
Is this how it should be done?
Should I use separate styles for all elements (inputs, selected, buttons, etc) instead of doing in "globally" in the app?

This is what I need to put in my containers/App/styles.css in order to make the input elements to show up (including the clear button for search and the drop down indicator for select)

select {
  box-sizing: border-box !important;
  border: 1px solid #ccc;
  appearance: menulist !important;
}
select::-ms-expand {
    display: block !important;
}

input[type="search"] {
    appearance: searchfield !important;
    box-sizing: border-box !important;
}

input::-webkit-textfield-decoration-container {
    display: -webkit-box !important;
    box-align: center !important;
}

input[type="search"]::-webkit-textfield-decoration-container {
    direction: ltr !important;
}

input[type="search"]::-ms-clear {
    display: block !important;
}

input[type="search"]::-webkit-search-cancel-button {
    appearance: searchfield-cancel-button !important;
    display: block !important;
    box-flex: 0 !important;
}

input[type="search"]::-webkit-search-decoration {
    appearance: searchfield-decoration !important;
    display: block !important;
    box-flex: 0 !important;
}

input[type="search"]::-webkit-search-results-decoration {
    appearance: searchfield-results-decoration !important;
    display: block !important;
    box-flex: 0 !important;
}

input[type="search"]::-webkit-search-results-button {
    appearance: searchfield-results-button !important;
    display: block !important;
    box-flex: 0 !important;
}

[mxstbr]

What you're fundamentally missing here is the mental model of working with CSS modules and components. _You should (almost) never have a use case for global CSS._ Instead of using global styling for input, create an <Input /> component and give it the styling!

Something like this:

import React from 'react';

import styles from './styles.css';

function Input(props) {
  return (
    <input
      className={styles.input}
      value={props.value}
      placeholder={props.placeholder}
      type={props.type}
    />
  );
}

export default Input;

Now put your styles in your styles.css file, but make them a class instead of global:

.input[type="search"] {
    appearance: searchfield;
    box-sizing: border-box;
}

.input::-webkit-textfield-decoration-container {
    display: -webkit-box;
    box-align: center;
}

.input[type="search"]::-webkit-textfield-decoration-container {
    direction: ltr;
}

.input[type="search"]::-ms-clear {
    display: block;
}

.input[type="search"]::-webkit-search-cancel-button {
    appearance: searchfield-cancel-button;
    display: block;
    box-flex: 0;
}

.input[type="search"]::-webkit-search-decoration {
    appearance: searchfield-decoration;
    display: block;
    box-flex: 0;
}

.input[type="search"]::-webkit-search-results-decoration {
    appearance: searchfield-results-decoration;
    display: block;
    box-flex: 0;
}

.input[type="search"]::-webkit-search-results-button {
    appearance: searchfield-results-button;
    display: block;
    box-flex: 0;
}

Done! Now simply use that component instead of doing <input /> directly.

---

The thing is, with components you could even go further and make that <Input /> component better than the standard input with propType validation and by adding a label that's enforced to be clickable to focus the input for a11y:

import React from 'react';

import styles from './styles.css';

function Input(props) {
  return (
    <label className={styles.label}>{props.label}
      <input
        className={styles.input}
        value={props.value}
        placeholder={props.placeholder}
        type={props.type}
      />
    </label>
  );
}

Input.propTypes {
  label: React.PropTypes.string.isRequired,
  value: React.PropTypes.string.isRequired,
  type: React.PropTypes.string, // could possibly be oneOf
};

export default Input;

And suddenly you have a consistent input field all across your application that'll always have good a11y, have readable labels, no global styles, etc.

That's the big benefit of components. By doing global styling you remove all of those benefits.

_I'm not saying that this specific example of an Input component is exactly what you want, but I think it illustrates the point_

I hope this answers the question!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.