Working with Dynamic CSS Classes in Motive's React Application

Motive's application is built on React, which means CSS class names include dynamically generated strings that change with each software update. This can cause issues for third-party integrations that rely on specific class names for targeting elements.

Understanding Dynamic CSS Classes

CSS classes in Motive follow a pattern like ToolCTAButton-module__v8DU3W__action, where the middle section (e.g., v8DU3W) is a randomly generated string that changes whenever the platform is updated. This means hardcoded class selectors will break after updates.

Solution: Using Partial Class Selectors

Instead of targeting the full class name, use JavaScript selectors that match the stable parts of the class name. Here's the recommended approach:

const target = document.querySelector('[class^="ToolCTAButton-module__"][class*="__action"]');

This selector works by:

• [class^="ToolCTAButton-module__"] - finds elements whose class starts with "ToolCTAButton-module__"

• [class*="__action"] - finds elements whose class contains "__action"

• Combining both ensures you only match the intended class regardless of the dynamic middle section.

Encountering duplicate classes

Sometimes, you might not be able to simply select a class and manipulate it. This is because there could be duplicate class names across the app, and you’ll need to be creative with your approach in selecting the target class using JavaScript.

Best Practices for Single Page Applications

Since Motive is a Single Page Application (SPA), the browser doesn't perform full page reloads when navigating. Instead, JavaScript swaps out views dynamically. When injecting custom elements:

• Always check if your element already exists before adding it to prevent duplicates

• Account for the fact that DOM elements may be replaced during navigation