style-jsx 样式安装和使用

思绪万千133

于 2020-04-20 23:50:02 发布

阅读量1.7k

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/u013611033/article/details/105648047

版权

安装

npm i babel-plugin-import customize-cra react-app-rewired styled-jsx less styled-jsx-plugin-less --dev

新建文件config-overrides.js

const { override, addBabelPlugins, fixBabelImports } = require('customize-cra');
module.exports = override(
  ...addBabelPlugins(
      //如果安装这个了，则支持jsx加上less的写法
    [
      "styled-jsx/babel",
      { "plugins": ["styled-jsx-plugin-less"] }
    ]
  ),
  //...addBabelPlugins( 普通的css 不用less ,用less就用上面的
    [
      "styled-jsx/babel"
    ]
  //ant的css样式
  fixBabelImports('import', {
    libraryName: 'antd-mobile', style: 'css'
  })
)

package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
}

书写方法

在根标签的同层级内新增style 和反引号

<div className="App">
      <Header></Header>
      <h1 className="hh11">我变颜色啦</h1>
      <style jsx>{
        `
       .hh11{
         background-color:red;
       }
       `
      }
      </style>
    </div>

不推荐，异常难用