1

I'm a graphic designer who has to customize a project done with strapi - and I am sooo lost. I managed to change backgroundcolors, backgroundimages so far - no problem. BUT: I am totally unable to customize the elements like the primary buttons.

I found lots of class definitions ".primary", changed them - without a result ... in the end I removed them all ... but the primary buttons stills look the same. How? Why?

The only why to get rid of the visual appearance of the primary button, was by removing (e.g. of the login page -> within the index.js under admin/src/containers/AuthPage) "primary" of the buttons declaration.

<Button primary label="users-permissions.Auth.form.button.login" type="submit" />

But that's not what I wanted. I want to customize e.g. the primary buttons. Not getting rid of it.

I searched stackoverflow for strapi customization or ui issues but couldn't find a solution. I found a lot of strategies of overriding bootstrap CSS, e.g.: How can I override Bootstrap CSS styles?

But strapis SCSS seems to something different I obviously don't understand yet.

If anyone has an idea or did already overrides to e.g. primary button - please let me know.

Thanks in advance, Stef.

Stef
  • 11
  • 2

1 Answers1

2

You have two ways to override the default style of a button

  1. You can pass a style prop to the component

    <Button label="Label" type="button" style={{ background: 'red' }} />

  2. You can pass a custom className prop:

In order to do so, you need to add the class in your 'plugins/users-permissions/admin/src/containers/Auth/styles.scss` file (where the component is going to be used)

.customButton {
  background: red;
}

Then in your index.js file

import Button from 'components/Button';
import styles from './styles.scss';

render() {
  return (
    <Button label="label" className={styles.customButton} />
  );
}
soupette
  • 1,260
  • 11
  • 11
  • 2
    Thanks soupette for your fast reply! But both ways would mean to step into every .js file where a primary button is used. Prove me wrong - but I still have in mind - to "find" the definition of ".primary" - alter the background color just once - and have the result on every primary button. It that really not possible? – Stef Sep 18 '18 at 21:55
  • Ah got it you can simply change the primary class in `strapi-helper-plugin/lib/src/Button/styles.scss` – soupette Sep 25 '18 at 13:53
  • Yes, cool. In general it would be that place to do so. But I also realized that there are several ocations (.scss files, and sometimes even style definitions in .js files) that override the "primary" definition made in src/Button/styles.scss. Almost every plugin has it's own components and orverrides the primary button styles. In the majority of cases with duplicated scss code from the "original button style". That was very confusing and frustrating - to not to have just one place to modify. In the end I decided to make my own overrides file and delete(comment out) all definitions everywhere – Stef Sep 27 '18 at 10:38
  • 1
    is there a way to change the entire theme color? for example, change the entire primary color for the button instead? – James Tan Nov 28 '20 at 03:01