Стили ClassName, не работающие в реакции

Question

У меня возникла небольшая проблема с компоновкой элементов оформления. У меня есть таблицы стилей scss в отдельном файле и импортирование их в файл ответов. Моя СКС stylsheet выглядит следующим образом:

.testStyle { 
    font-family: avenir; 
    color: blue; 
} 

Мои реагировать файл выглядит следующим образом:

import React from 'react' 

import styles from '../styles/main.scss' 

class Temp extends React.Component { 
    render() { 
    return (
     **<div className={styles.testStyle}>** 
     <h1>Hello</h1> 
     </div> 
    ) 
    } 
} 

export default Temp 

С помощью этой установки, мои стили не пройдены, однако, если он будет работать, если я заменить звёздный line с <div className='testStyle'>, поэтому кажется, что стили импортируются правильно. Может кто-нибудь помочь с этим? Благодарю.

Answer 1

Импорт таблицы стилей просто скажет Webpack или другим инструментам сборки, чтобы обрабатывать эту таблицу стилей и включать ее в выходные файлы. Он, насколько мне известно, не позволяет вам использовать шаблон JSX. Таким образом, просто импортируя его, ваши стили будут доступны после цикла сборки. Вам вообще не нужно его использовать.

className принимает строку и непосредственно переводит на html class - так что используйте его так.