How to use toddle component in webflow and use the styling from webflow

Usama · 2024-11-06T12:08:52.22+00:00

I want to use toddle component and want to have the component get the styling from webflow classes , so that it remain consistent with my website is this possible currently ?

Usama

8 months ago

I want to use toddle component and want to have the component get the styling from webflow classes , so that it remain consistent with my website

is this possible currently ?
Andreas Møller

8 months ago

Yes. you should just be able to add the classes to the elements in the toddle component.
I would not recommend this approach though, You will likely have an easier time just styling the components in toddle.
Usama

8 months ago

@Andreas Møller

i will try the first approach and let you know

thanks for the help
𝓜𝓪𝔁𝓲

3 months ago

@Usama how has it been going?
Tod

3 months ago

Great energy @𝓜𝓪𝔁𝓲! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
𝓜𝓪𝔁𝓲

3 months ago

@Andreas Møller could you dig a bit deeper how to use the overall site styling in shadow roots as i thought this is not possible to the different DOM.
Andreas Møller

3 months ago

Not that is correct you can only style the root element with classes
@𝓜𝓪𝔁𝓲
@Usama how has it been going?
Usama

3 months ago

I did manage to made a implementation that works with a Webflow Component.

The styling comes from the Webflow component by using same class name in both Webflow and Toddle Component
Usama

3 months ago

The solution is fine

As always a native solution would be beneficial

I work with 2 Webflow Enterprise Partner agencies and they have some project where a custom component that can be styled within Webflow is always preferred.
Currently we use either Alpine JS or React JS to handle these
Andreas Møller

3 months ago

How do you handle ot with React?
Usama

2 months ago

either with importing react library and writing the code inside an embed

the other approach we follow is we create npm package for that component , import it inside Webflow and then use custom element feature in Webflow so write the markup for that react element.

We are currently for the DevLink update from Webflow - it is currently one way Webflow -> React and not the other way

hope they provide this option - but still it will be a hybrid solution not a full no code solution

How to use toddle component in webflow and use the styling from webflow

Usama

Andreas Møller

Usama

𝓜𝓪𝔁𝓲

Tod

𝓜𝓪𝔁𝓲

Andreas Møller

Usama

Usama

Andreas Møller

Usama