Реактивный класс css без импорта - PullRequest
Новая
       8

Реактивный класс css без импорта

0 голосов
/ 21 апреля 2020

У меня есть каталог с css файлами, которые я хочу импортировать так, чтобы я мог использовать их следующим образом, без импорта в начало файла 

<div className={`chartbar`}

Мои файлы, которые я хочу импортировать их встроенными, они все находятся в директории 'src / app / container / chart / styles'. Следующее кажется, что не работает 

  {
        test: /\.css$/,
        include: [
            path.resolve(__dirname, 'src/app/containers/chart/styles'),
        ],
        use: [
            {loader: 'style-loader'},
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            },
        ]
    },

1 Ответ

0 голосов
/ 21 апреля 2020

Не знаю, правильно ли я понял ваш вопрос. Но я думаю, что вы хотите применить модуль css условно, используя встроенный css без импорта модуля css. Да, это легко сделать в React. Это можно сделать, создав объект Java Script со свойствами css и применив его при необходимости. 

import React from "react"
import ReactDOM from "react-dom"
const wrapper = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
   padding: '50px',
   color: '#444',
   border: '1px solid #1890ff',
 };
 function Print(){
 return(
 <div style={wrapper}><h1>
 Hello World
 </h1>
 </div>
 )
 ReactDOM.render(<Print/>,document.getElementById("root"))
 }
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
</div>

Надеюсь, это поможет!

...