Question

我将ReactJS与Webpack和TypeScript一起使用。我正在尝试将CSS包含在React中。但是我的CSS没有被我的React应用程序使用。我创建了一个global.d.ts文件来声明我的CSS模块。我将css导入了my.tsx文件，但是当我将一个类添加到元素中时，没有任何效果。

我已经尝试安装CSS模块，但是没有成功。因此，我刚刚提出了创建global.d.ts文件的解决方案

global.d.ts：

@IBAction func adButton(_ sender: UIButton) { let storyboard = UIStoryboard(name: "Main", bundle: nil) let myVC = storyboard.instantiateViewController(withIdentifier: "newVC") //self.present(myVC, animated: true, completion: nil) if (interstitial.isReady) { interstitial.present(fromRootViewController: self) interstitial = createAd() //self.present(myVC, animated: true, completion: nil) } self.present(myVC, animated: true, completion: nil) }

Hello.tsx

declare module '*.css';

Hello.css

import * as css from './Hello.css';

export interface HelloProps {
  compiler: string;
  framework: string;
}

export class Hello extends React.Component<HelloProps, {}> {

  render() {
    return (
      <form>
        <p className={css.test}> Test </p>
      </form>
    );
  }
}

webpack.config.js


.test {
   color: red;
}

“测试”一词用黑色表示。何时应为红色

Answer 1

我很新来做出反应，但我认为如果您删除： “从'./Hello.css'中导入*作为css；”并将其替换为“ import'./Hello.css';”

Answer 2

这是由于您没有在css-loader选项中将模块设置为true。

//parent::table//applic[not(parent::table)]

此外，由于无需进行// webpack.config.js rules: [ { test: /.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, }, }, ], }, ],导入，我将执行以下操作。

*

，然后在您的jsx中：

import css from './Hello.css'

ReactJS中jsx不使用CSS

2 个答案: