创建 React 应用程序

创建一个新应用程序

首先，使用 create-react-app 创建一个新应用程序。

npx create-react-app my-app
 CopyCopy

安装依赖项

npm i reflexjs
 CopyCopy

创建主题

使用 Reflexjs CLI 实用程序生成一个主题。

npx reflexjs --preset base
 CopyCopy

这将在项目的根目录中使用基本预设创建一个 theme.js 文件。

⚠️ 将 theme.js 移至 src 目录中。

更新 index.js

src/index.js
import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import theme from "./theme" 
import { ThemeProvider } from "reflexjs" 

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()
 CopyCopy

现在，您可以开始使用 Reflexjs 为页面添加样式了。

导入 JSX 实用

Reflexjs 使用自定义的 jsx 实用来转换样式 props。要启用此实用，请将以下内容添加到 .jsx 或 .tsx 文件的顶部。

/** @jsxImportSource "reflexjs" */
 CopyCopy

示例

src/App.js
/** @jsxImportSource "reflexjs" */ 

function App() {
  return (
    <div p="10" textAlign="center">
      <p color="primary">
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  )
}

export default App
 CopyCopy