reactJS没有应用样式（.less文件）？

Question

我一直在尝试搜索这个主题，但似乎我可能会使用错误的字词，因为我找不到任何信息....

我想让这个包运行起来..（https://github.com/wangzuo/input-moment）

我已经成功地使日历工作，它保存了日期，但它不会切换到时间选项卡，并且它也没有正确设置样式，即使我已将.less文件导入到我的react组件中。该文件看起来像这样......

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}
        />
    )
  }
}

然而我的组件看起来像这样......

你能否看到任何明显的原因，为什么组件不会像github上的例子一样正确...（http://wangzuo.github.io/input-moment/）

Answer 1

您可能无法获得该软件包提供的样式。如果您使用npm来安装软件包，那么您的import语句可能如下所示：

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

另外，将App.css与示例中的包作者使用的CSS进行比较，可以在https://github.com/wangzuo/input-moment/blob/master/example/app.less找到，源代码在下面重复

*, *: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%;
  }
}