ReactJS and Chakra UI with Target

[andywoodrow]

We have a web app built in ReactJS and Chakra UI.  Normally, we'd use Target to modify or manipulate elements in the DOM:

• <div class="this-is-easy-to-target">Hello</div>

but Chakra classnames and styles are all generated on the fly, so they won't always be the same:

• <div class="chakra-css-675Fhd9">Hello</div>

We could use other selectors, but it's quite complicated and would like a more robust way of running A/B tests on this platform.  I guess I'm asking for some advice on how we can use Target to run AB and MVT tests on a REACTJS platform I think using JSON format?!

Can anyone provide either some thoughts, links etc?

Thankyou!!

[Gokul_Agiwal · Accepted solution]

Hello @andywoodrow 

I have work with ReactJS integrating target but not used Chakra UI as of yet however I can see there are some ways you can try out and target the specific selector for AB / MVT test. Just like 

1) Override the chakra class name with custom name

2) used the react component name as class name 

3) Used babel plugin in your build process name as babel-plugin-react-remove -classname

Here are the links ( Seems long read - sorry) 

https://stackoverflow.com/questions/73073413/how-to-override-chakra-ui-or-emotion-css-in-js-styling-...

https://github.com/emotion-js/emotion/issues/2037

https://github.com/chakra-ui/chakra-ui/issues/682

https://github.com/chakra-ui/chakra-ui/issues/211

https://github.com/chakra-ui/chakra-ui/issues/2685

https://github.com/chakra-ui/chakra-ui/issues/2229

Hope this helps.