Как импортировать CSS Модуль React и JSX? ( Ошибка ) - PullRequest
Новая
       35

Как импортировать CSS Модуль React и JSX? ( Ошибка )

1 голос
/ 05 февраля 2020

В моем приложении реагирования я хочу локально стилизовать свои компоненты.
Для этого я использую соглашение yourCSS.module.css.

В myComponent.jsx Затем я импортирую CSS - Модуль: 

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;
}

Любая помощь будет принята с благодарностью !

Ответы [ 3 ]

1 голос
/ 05 февраля 2020

Вы должны использовать style prop вместо style 

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

</div>

Или просто удалить стилевую опору. Значение пусто!

0 голосов
/ 05 февраля 2020

Здесь вы можете найти документацию по использованию inline 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;

Но если вы хотите использовать атрибут style, он работает следующим образом: 

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> 
     );
}
}
0 голосов
/ 05 февраля 2020

Я думаю, что это опечатка: 

// 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>
...