[英]Grommet integration with create-react-app
i'm looking for a way to integrate grommet framework to a react app created with the cli. 我正在寻找一种方法将grommet框架集成到用cli创建的反应应用程序中。 I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS.
我想在我的应用程序中使用react grommet组件,但预处理器SCSS存在一些问题。 Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working.
今天,我尝试以很多方式集成它们,我遵循了很多教程,但它仍然无法正常工作。 Do you know or do you have success to use them together ?
你知道或者你是否成功地将它们一起使用? Thankss
Thankss
For Grommet 1.x 对于Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. 如果您不想将scss添加到项目中,那么grommet -css是一个很好的选择。 You can install it and import the css into your
App.js
. 您可以安装它并将css导入
App.js
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. 请注意,要自定义默认主题,您必须分叉repo,进行更改,例如在index.scss中包含不同的默认索环样式或调整grommet scss变量。 Then you have to update the name in package.json, run npm build, then run npm publish.
然后你必须更新package.json中的名称,运行npm build,然后运行npm publish。
Here is an example using grommet
and grommet-css
这是一个使用
grommet
和grommet-css
的例子
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.