Custom Component with Custom Variants
See original GitHub issueI am wondering, is it possible to create custom components that use custom variants when used.
For example:
// components.js
const MyComp = ({children}) => (
<Box>{children}</Box>
}
// theme.js
boxes: {
customVariant: {
height: "24px",
width: "250px",
bg: "#abcdef"
}
}
// index.js
const OtherComp = () => (
<MyComp variant=customVariant">CONTENT</MyComp>
I tried something like this and it did not work. I even tried other variations - and no success.
So I am wondering, is something like this possible? If so, how can I do it?
Thanks.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Custom Component Variants | Custom Themes | Styling - Vaadin
You can define your own component theme variants using component-specific style sheets in a custom theme. vaadin-button.css.
Read more >Creating custom variants with Material-UI - Stack Overflow
I am trying to create custom variants for the Button component in Material-UI. My first step is to create a component based off...
Read more >Create interactive components with variants - Figma Help Center
Edit variant interactions · Select the instance. · Click in the Instance section of the right sidebar. · Select Go to main component....
Read more >Create Custom Variants in Chakra UI | egghead.io
In this lesson, you'll learn how to create Custom Variants in Chakra UI. You will create a Primary variant for the Button component...
Read more >Custom components' variants #4781 - GeekyAnts/NativeBase
A custom-component is made composed of native-base components. It seems not possible to use the name of this custom-component in the theme- ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
If you have this in your theme
you’d access it like so
This worked perfectly – and I realize that I don’t even need to use
box
orboxes
in the theme file. Thanks.