Skip to content

Commit

Permalink
wrapping-react: import css in local component (#1099)
Browse files Browse the repository at this point in the history
  • Loading branch information
masenf authored Jan 5, 2025
1 parent c91c94c commit cccb619
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions docs/wrapping-react/guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,11 @@ class GithubComponent(rx.Component):
library = "@masenf/hello-react@github:masenf/hello-react"
tag = "Counter"

def add_imports(self):
return {
"": ["@masenf/hello-react/dist/style.css"]
}

def github_component_example():
return GithubComponent.create()
```
Expand All @@ -151,6 +156,30 @@ Some important notes regarding this approach:
* `prepare` or `build` scripts will NOT be executed. The distribution archive,
directory, or repo must already contain the built javascript files (this is common).

```md alert
# Ensure CSS files are exported in `package.json`

In addition to exporting the module containing the component, any CSS files
intended to be imported by the wrapped component must also be listed in the
`exports` key of `package.json`.

```json
{
// ...,
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.umd.cjs"
},
"./dist/style.css": {
"import": "./dist/style.css",
"require": "./dist/style.css"
}
},
// ...
}
```

### Import Types

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

0 comments on commit cccb619

Please sign in to comment.