如何导入 CSS 模块 React 和 JSX？（错误）

Question

在我的 React 应用程序中，我想在我的组件上设置本地样式。
为此，我使用 yourCSS.module.css 约定。

在 myComponent.jsx 然后我导入那个 CSS-Module:

import React, { Component } from 'react';
import styles from './startPage.module.css' //loading the css moduleenter code here

class StartPage extends Component {
    state = {  }
    render() { 
        return ( 
           <div className="container">
               <div className="row">    {/*Row 1 - contains title*/} 
                    <div style className="col-md-6 offset-md-3">
                        <p styles={styles.boilerplate}>some boilterplate text</p>
                    </div>
               </div>

               <div className="row">    {/*Row 2 - contains buttons*/} 

               </div>
           </div> 
         );
    }
}

export default StartPage;

然后 React 在我的浏览器中抛出以下错误：

Error: The `style` prop expects a mapping from style properties to values, not a string.
For example, style={{marginRight: spacing + 'em'}} when using JSX.

我的 css 当前包含

.boilerplate {
    background-color:#000000;
    border: black dotted;
}

如有任何帮助，我们将不胜感激！

Answer 1

我认为这是一个错字：

// remove style prop or it will be converted to style={true}
<div className="col-md-6 offset-md-3">
// use "style" prop instead of "styles"
  <p style={styles.boilerplate}>some boilterplate text</p>
</div>

Answer 2

你应该使用 styles 道具而不是 style

<div style className="col-md-6 offset-md-3">

</div>

或者只删除样式道具。该值为空！

Answer 3

您可以找到有关如何在 React here.

中使用内联 css 的文档

您的第一选择应该是使用 ClassName 来引用在外部 CSS 样式表

中定义的类

import React, { Component } from 'react';
import './startPage.module.css' //loading a css file here

class StartPage extends Component {
state = {  }
render() { 
    return ( 
       <div className="container">
           <div className="row">    {/*Row 1 - contains title*/} 
                <div className="col-md-6 offset-md-3"> // remove style
                    <p className='boilerplate'>some boilterplate text</p> // add boilerplate as ClassName
                </div>
           </div>

           <div className="row">    {/*Row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}

export default StartPage;

但是如果您想使用样式属性，它的工作方式如下：

import React, { Component } from 'react';


const divstyles = {
    backgroundColor: '#000000',
    border: 'red dotted'
}

class StartPage extends Component {
state = {  }
render() { 
    return ( 
       <div className="container">
           <div className="row">    {/*Row 1 - contains title*/} 
                <div className="col-md-6 offset-md-3">
                <p style={divstyles}>some boilterplate text</p>
                </div>
           </div>

           <div className="row">    {/*Row 2 - contains buttons*/} 

           </div>
       </div> 
     );
}
}

如何导入 CSS 模块 React 和 JSX？（错误）

How to Import CSS Module React and JSX? ( Error )

css

reactjs

css-modules

如何导入 CSS 模块 React 和 JSX？ （ 错误 ）

How to Import CSS Module React and JSX? ( Error )

css

reactjs

css-modules

如何导入 CSS 模块 React 和 JSX？（错误）