Customise "Save" Button Color inside a Modal

Hi All,

I am using the new Action Buttons to edit a record in Airtable. When the modal opens, there’s a ‘cancel’ and ‘save’ button. It seems like these have default Softr style, and unless I’m mistaken there’s no way to change this natively?

Does anyone know what selectors we need to target to change the colour of the ‘save’ button, along with the after click button ‘save loading’ version of the button?

Thanks.

Hey @EnigmaXXIII, can you please share a screenshot oof those buttons so that I can help you?

@Marine.Hovhannisyan sure, please see the screenshots below…

I’m currently selecting the main button using .css-128nx5f, but it does not work for the version that appears after the button is clicked. I cannot seem to find the selector for that part. Am I missing something?

These are in the edit record action button modal by the way.

Thanks.

@Marine.Hovhannisyan any updates on this?

@Marine.Hovhannisyan do you have any updates on this please? Should I contact someone via the chatbox instead?

Hi,

<style>
#list-detailsx .MuiDialogActions-root .MuiButtonBase-root {
    color: #xxxxxx;
}
</style>

:point_up_2: This is the code you need with the right selector.

It only deals with the text color but you know that to change the background color you just need to add background-color: #xxxxxx; below or above the color: line.

If you want to change the color of all the buttons of your block, then :point_down:

<style>
#list-detailsx .MuiButtonBase-root {
    color: #xxxxxx;
}
</style>

If you only want to change the color of the save button (which is the second button inside the modal for action button) :point_down:

<style>
#list-detailsx .MuiDialogActions-root .MuiButtonBase-root:nth-child(2) {
    color: #xxxxxx;
}
</style>
2 Likes

Thanks, @matthieu_chateau for the custom code and the detailed explanation.

@EnigmaXXIII Indeed, we do not have a feature to change that button background and text colors natively added to our app but the code Mattieu provided works as expected.