docs: update component styling docs #1553
Conversation
|
☁️ Nx Cloud ReportCI is running/has finished running commands for commit ed6788c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 4 targetsSent with 💌 from NxCloud. |
|
@samijaber Shall I update the |
| ### `standalone components` | ||
|
|
||
| You should consider developing your components without a fixed style inside the Mitosis component. | ||
| Loading the style inside the consuming app via bundler (vite, webpack, etc.) or with default `<link rel="stylesheet" ...`, | ||
| enables a flexible approach. You would use `class` or `data-*` attributes inside your Mitosis component: | ||
|
|
||
| ```tsx | ||
| /* ./src/my-component/my-component.lite.tsx */ | ||
| export default function CSSExample() { | ||
| return <div class="my-component" />; | ||
| } | ||
| ``` | ||
|
|
||
| The advantage of this is, that you can rely on the CSS ecosystem (sass, less, etc.). | ||
| But you might encounter some problems when you want to use web-components with shadowDOM. |
There was a problem hiding this comment.
I don't fully understand this note. What's a "standalone component"?
There was a problem hiding this comment.
I meant headless, I don't know why I wrote standalone in the first place.
Changed it.
There was a problem hiding this comment.
I see! Thanks.
I cleaned up the grammar a bit 👍🏽
Description
Please provide the following information:
closes #1250
Add some additional explanation for styling Mitosis components
Make sure to follow the PR preparation steps in CONTRIBUTING.md before submitting your PR:
yarn fmt:prettier.yarn test:updateyarn g:changesetand follow the CLI instructions. Alternatively, use the Changeset Github Bot to create the file.