I am unable to modify the css in Dwolla Drop-in components

As you see in the above image the type field is given a margin-left of 10px from the Dwolla css source. Now I am unable to modify the css in Dwolla Drop-in components. As the Dwolla drop-in components use shadow dom. The css we are writing is not affecting. Can you please let me know how we can write custom css to customize the UI?

Also, i tried to import a custom css file or use css hosted link to overwrite css like this but it is not working:

// Using hosted css url - Please check the css URL for the test styles i have wrote
const response = window.dwolla.configure({
environment: ‘sandbox’,
styles: ‘https://static.staticsave.com/new12wwwww/index.css’,
tokenUrl: ‘http://localhost:8000/tokenUrl’,
success: (res) => {console.log(“res”, res);},
error: (err) => { console.log(“err”, err); },

Hi @HIMALAY_SHANKAR – you should be able to overwrite the CSS classes used by the drop-in component to update the shadow-dom within. For example, the CSS selector for the Type field is ".dwolla-funding-source-type" (more selectors are documented here for reference).

1 Like