小编Bon*_*nie的帖子

我正在安装stylelint-config-styled-components一个反应项目.

当我执行npm run lint:css(或直接通过CLI使用stylelint命令)时,我没有得到任何结果.我故意添加了额外的空格和重复的样式声明,所以应该有一些来自stylelint的反馈我已经破坏了规则.但是,我什么也没得到,甚至没有错误信息.有任何想法吗？

我安装了以下软件包:

• stylelint 9.1.3
• stylelint-config-recommended 2.1.0
• stylelint-config-styled-components 0.1.1
• stylelint-processor-styled-components 1.3.1

我在使用以下脚本package.json:

"scripts": {
    //other scripts
    "lint:css": "stylelint './src/**/*.js'"
}

我的内容.stylelintrc:

{
 "processors": ["stylelint-processor-styled-components"],
 "extends": [
   "stylelint-config-recommended",
   "stylelint-config-styled-components"
 ]
}

我的项目的文件结构(我已经尝试直接在具有相同结果的文件上运行命令,所以我不认为这是一个无法找到.js文件的问题)

-root
    -.stylelintrc
    -src
      -Components
        -Directory
          -ThingIWantLinted.js
        -AnotherDirectory
          -AnotherThingTolint.js

我正在使用 react-owl-carousel 包。

https://www.npmjs.com/package/react-owl-carousel

我已按照说明成功实现了代码，并且轮播运行顺利。

问题：目前我同时显示 4 个项目。而在每一个画面中，这4个项目都来了。而不是 4 ，我想为 768px 到 1200px 之间的设备显示 3 个项目，500px 到 767px 之间的 2 个项目和 499px 以下设备的 1 个项目。

owl carousel doc 中有包含“响应式”的选项。但我想知道如何包含它以实现相同的目标。

这是我到目前为止所做的。

import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards  from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';

const options = {
    items: 4,
};

class DashboardPage extends Component {
  render() {
    return (
      <div>
          <section className="has-small__padding has-grey__bg">
              <UserAvtar /> …

我已经看到了有关此问题的几个问题，但没有一个问题可以帮助我解决我的问题。我有一个父组件和三个子组件。

import React, { Component } from 'react'

import Header from "./Header";
import ChildOne from "./ChildOne"
import ChildTwo from "./ChildTwo"

class Parent extends Component {
  render() {
    return (
      <div>
        <Header />
        <ChildOne />
        <ChildTwo />
      </div>
    )
  }
}

export default Parent;

每个子组件都包含一个简单的div. 我已将以下样式应用于组件：

.header {
  position: relative;
  width: 100%;
  height: 100px;
}

.childone {
  width: 100%;
  height: 480px;
  position: absolute;
  top: auto;
}

.childtwo {
  width: 100%;
  height: 240px;
  position: absolute;
  top: auto;
}

我希望 React …