title: Styling JSON Schema Form using classNames and styled
body: <p>Very new to this whole react thing, but from what I understand, the <code>schema</code> determines what the form data should be:</p>
  <pre><code>var schema = {
      type: &quot;array&quot;,
      title: &quot;Season Data&quot;,
      items: {
          type: &quot;object&quot;,
          required: [&quot;name&quot;, &quot;shortname&quot;],
          properties: {
              name: {
                  type: &quot;string&quot;,
                  maxLength: 30
              },
              shortname: {
                  type: &quot;string&quot;,
                  maxLength: 6,
                  pattern: &quot;^s\\d*$&quot; //must start with s and end with number
              },
              starts_at: {
                  type: &quot;string&quot;
              },
              ends_at: {
                  type: &quot;string&quot;
              }
          }
      }
  };
  </code></pre>
  <p>While the <code>uiSchema</code> determines what it should look like:</p>
  <pre><code>let uiSchema = {
      name: {
          classNames: &quot;bold-title&quot;,
          &quot;ui:placeholder&quot; : &quot;Season name&quot;
      },
      shortname: {
          &quot;ui:placeholder&quot; : &quot;Assign a shortname (e.g. s5)&quot;
      },
      starts_at: {
          classNames: &quot;label-date-align&quot;,
          &quot;ui:widget&quot;: dateWidget,
      },
      ends_at: {
          classNames: &quot;label-date-align&quot;,
          &quot;ui:widget&quot;: dateWidget
      }
  }
  </code></pre>
  <p>Both of those are in a <code>page_schema.js</code>, along with this:</p>
  <pre><code>const dateWidget = props =&gt; {
      return (
          &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;
              &lt;KeyboardDateTimePicker
                  format=&quot;yyyy-MM-dd hh:mm:ss a&quot;
                  value={props.value}
                  onChange={(date, value) =&gt; {
                      let jsonDate = date &amp;&amp; date.toJSON();
                      props.onChange(jsonDate || value);
                  }}
                  inputVariant=&quot;outlined&quot;
              /&gt;
          &lt;/MuiPickersUtilsProvider&gt;
      );
  };
  </code></pre>
  <p>Here's the <code>page_form.js</code>:</p>
  <pre><code>class SeasonForm extends Component {
      constructor(props) {
          super(props);
          this.state ={ seasonsData: [], seasonsDataIndex: 0, formData: {} };
      }
      render() {
          return (
              &lt;Box&gt;
                  &lt;SchemaForm
                      liveValidate
                      schema={seasonSchema}
                      uiSchema={seasonUiSchema}
                      widgets={customWidgets}
                      &gt;
                  &lt;/SchemaForm&gt;
              &lt;/Box&gt;
          );
      }
  }
  
  export default styled(SeasonForm) ({
      &quot;&amp; .label-date-align&quot; : {
          verticalAlign: &quot;middle&quot;,
          lineHeight: &quot;50px&quot;,
      },
      &quot;&amp; .reward-list label&quot; : {
          display: &quot;none&quot;
      },
  });
  </code></pre>
  <p>But for some reason the exported style just wouldn't take effect. Inspecting the code in Chrome reveals that the className <code>label-date-align</code> is being assigned properly, but it looks terrible, and even a simple text color change wouldn't work.</p>
  <p><a href="https://i.stack.imgur.com/f4nPI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f4nPI.png" alt="enter image description here" /></a></p>
  <p>Is there anything I missed?</p>