Skip to content

Commit cccb619

Browse files
authored
wrapping-react: import css in local component (#1099)
1 parent c91c94c commit cccb619

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed

docs/wrapping-react/guide.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,11 @@ class GithubComponent(rx.Component):
137137
library = "@masenf/hello-react@github:masenf/hello-react"
138138
tag = "Counter"
139139

140+
def add_imports(self):
141+
return {
142+
"": ["@masenf/hello-react/dist/style.css"]
143+
}
144+
140145
def github_component_example():
141146
return GithubComponent.create()
142147
```
@@ -151,6 +156,30 @@ Some important notes regarding this approach:
151156
* `prepare` or `build` scripts will NOT be executed. The distribution archive,
152157
directory, or repo must already contain the built javascript files (this is common).
153158

159+
```md alert
160+
# Ensure CSS files are exported in `package.json`
161+
162+
In addition to exporting the module containing the component, any CSS files
163+
intended to be imported by the wrapped component must also be listed in the
164+
`exports` key of `package.json`.
165+
166+
```json
167+
{
168+
// ...,
169+
"exports": {
170+
".": {
171+
"import": "./dist/index.js",
172+
"require": "./dist/index.umd.cjs"
173+
},
174+
"./dist/style.css": {
175+
"import": "./dist/style.css",
176+
"require": "./dist/style.css"
177+
}
178+
},
179+
// ...
180+
}
181+
```
182+
154183
### Import Types
155184

156185
Sometimes the component is a default export from the module (meaning it doesn't require curly braces in the import statement).

0 commit comments

Comments
 (0)