CODEWITHSUNDEEP
javascriptreactjs
Joff
Joff

Reputation: 12187

reactJS not applying styles (.less files)?

I have been trying to search on the topic but it seems that I might be using the wrong terms as I cannot find any information....

I am trying to get this package to work..(https://github.com/wangzuo/input-moment)

I have succeeded in getting the calendar to work, it saves the date, but it will not switch to the time tab and it also does not style correctly, even though I have imported the .less files into my react component.. the file looks like this...

require('input-moment/src/less/input-moment.less')

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import moment from 'moment';
import InputMoment from 'input-moment';

class Date extends Component {
  constructor(props) {
    super(props);

    this.state = {m: moment()}
  }

  handleChange(m) {
    this.setState({ m });
  }

  handleSave() {
    console.log('saved', this.state.m.format('llll'));
  }

  render () {
    return (
        <InputMoment
          moment={this.state.m}
          onChange={this.handleChange}
          onSave={this.handleSave}
        />
    )
  }
}

and yet my component looks like this...

InputMoment

Can you see any obvious reason as to why the component will not style correctly like the example on github...(http://wangzuo.github.io/input-moment/)

Upvotes: 4

Views: 1352

Answers (1)

Todd Chaffee
Todd Chaffee

Reputation: 6824

You probably aren't getting the styles provided by the package. If you used npm to install the package, then your import statement could look like this:

require('input-moment/dist/input-moment.css')

Also, compare your App.css to the CSS used by the package author in the example, which can be found at https://github.com/wangzuo/input-moment/blob/master/example/app.less, source is repeated below

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 87.5%/1.5em 'Lato', sans-serif;
}

.app {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 90px;
  padding: 0 20px;

  .input {
    margin-bottom: 20px;
  }

  input {
    padding: 7px 8px;
    font-size: 14px;
    width: 100%;
  }
}

Upvotes: 4

Related Questions