search

studiobakers / react-ui-toolkit

Bakers Studio's React-based UI Toolkit
MIT License
15 stars 2 forks source link

Overriding styles #30

Closed edizcelik closed 3 years ago

edizcelik commented 3 years ago

It is really difficult to override default styles that comes from the toolkit. I observed that the main reason is that, within the final HTML, the styles from the toolkit comes after the style tags that includes a project's own CSS files. For example, in my dev environment the contents of head tag is like the following:

<head>
    <!-- ... -->

    <style>
.page {
  background-color: white; }

.page--with-bg {
  background-color: var(--bg-color); }

.page--with-header .page-content {
  /* prettier-ignore */
  min-height: calc(100vh - var(--page-header-height) - var(--page-header-margin-bottom)); }
    </style>

   <!-- ... -->

<style type="text/css">
/* stylelint-disable color-no-hex */
:root {
  --button-bg: black;
  --button-color: white;
  --dropdown-text-color: black;
  --dropdown-header-button-bg: #ebebeb;
  --dropdown-selected-item-bg: #ebebeb;
  --checkbox-border-color: black;
  --checkbox-focus-border-color: black;
  --checkbox-focus-bg: black;
  --checkbox-icon-color: white;
  --radio-border-color: darkgrey;
  --radio-focus-border-color: black;
  --radio-focus-icon-color: black;
  --tag-bg: #ebebeb;
  --text-color: black;
  --invalid-text-color: #a43030;
  --placeholder-text-color: #757575;
  --default-border-color: #ebebeb;
  --default-box-shadow: 0 0 5px #ebebeb; }

/* stylelint-enable color-no-hex */
.form-field {
  margin-bottom: 25px; }
  .form-field .form-field-label {
    display: block; }
  .form-field .form-field-label-text {
    display: block;
    margin-bottom: 8px; }
</style>

   <!-- ... -->

</head>

Same with the released build:

<head>
   <!-- ... -->
   <link href="https://s3.us-east-1.amazonaws.com/mastermind-web-staging/main-fe64a99d208323e02c4a.css" rel="stylesheet">

<style type="text/css">
/* stylelint-disable color-no-hex */
:root {
  --button-bg: black;
  --button-color: white;
  --dropdown-text-color: black;
  --dropdown-header-button-bg: #ebebeb;
  --dropdown-selected-item-bg: #ebebeb;
  --checkbox-border-color: black;
  --checkbox-focus-border-color: black;
  --checkbox-focus-bg: black;
  --checkbox-icon-color: white;
  --radio-border-color: darkgrey;
  --radio-focus-border-color: black;
  --radio-focus-icon-color: black;
  --tag-bg: #ebebeb;
  --text-color: black;
  --invalid-text-color: #a43030;
  --placeholder-text-color: #757575;
  --default-border-color: #ebebeb;
  --default-box-shadow: 0 0 5px #ebebeb; }

/* stylelint-enable color-no-hex */
.form-field {
  margin-bottom: 25px; }
  .form-field .form-field-label {
    display: block; }
  .form-field .form-field-label-text {
    display: block;
    margin-bottom: 8px; }
</style>
   <!-- ... -->
</head>

As these styles come after the bundle, the only way to override them is to increase the specificity of selectors used within projects. For example, in order to override the display property of .button styles, I did the following hack in my project:

.button.button {
  display: flex;
  align-items: center;
  justify-content: center;
}