One-off modifications

Most components will allow you to provide a `class` attribute. If you wish to override an existing class you can prepend an exclamation mark to the class:

          <.h2 class="leading-1">Might not work</.h2>
<.h2 class="!leading-1">Works!</.h2>

        

Global modifications

Every CSS class is located in the CSS file you pull into your `app.css`. Here is the file on Github.

What you can do, is find the classes you want to override, and put them in your `app.css` file.

          @import "tailwindcss/base";
@import "../../deps/petal_components/assets/default.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.pc-button {
  @apply inline-flex items-center justify-center font-semibold tracking-wider uppercase transition duration-150 ease-in-out border-2 rounded-none focus:outline-none;
}
.pc-button--primary {
  @apply text-black border-black bg-primary-400 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
}

        

Backwards compatibility with new custom components

Petal Pro

1. In your project, navigate to the lib/petal_pro_web/components folder and create a new folder e.g new_components
2. In that folder, create a new component e.g button.ex.
3. Copy and paste in the code from the petal_components button component: https://github.com/petalframework/petal_components/blob/main/lib/petal_components/button.ex
4. Rename module from PetalComponents.Button to something else e.g PetalProWeb.NewComponents.Button
5. In button.ex, rename all instances of pc- to nc-
6. In the assets/css folder, create a new file called, nc_default.css
7. Add a reference to nc_default.css in the app.css file:
   css

             @import "tailwindcss/base";
   @import "../../deps/petal_components/assets/default.css";
   @import "combo-box.css";
   @import "editorjs.css";
   @import "../node_modules/tippy.js/dist/tippy.css";
   @import "tailwindcss/components";
   @import "nc_default.css";
   @import "tailwindcss/utilities";
   
           

8. Copy the button css from default.css and paste into the nc_default.css file and find and replace all instances of pc- to nc-: https://github.com/petalframework/petal_components/blob/main/assets/default.css
   css

             /* Buttons */
   
   .nc-button {
   @apply inline-flex items-center justify-center font-medium transition duration-150 ease-in-out border rounded-md focus:outline-none;
   }
   
   /* Buttons - sizes */
   
   .nc-button--xs {
   @apply text-xs leading-4 px-2.5 py-1.5;
   }
   .nc-button--sm {
   @apply px-3 py-2 text-sm leading-4;
   }
   .nc-button--md {
   @apply px-4 py-2 text-sm leading-5;
   }
   .nc-button--lg {
   @apply px-4 py-2 text-base leading-6;
   }
   .nc-button--xl {
   @apply px-6 py-3 text-base leading-6;
   }
   
           

9. In lib/petal_pro_web.ex, update html_helpers with a module that encapsulates NC components (similar to what is suggested here )
   elixir

             defp html_helpers do
     quote do
       # HTML escaping functionality
       # Core UI components and translation
       use PetalComponents
       use PetalProComponents
       use Gettext, backend: PetalProWeb.Gettext
   
       import PetalProWeb.CoreComponents
       import PetalProWeb.Helpers
       import Phoenix.HTML
   
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS
   
       # Routes generation with the ~p sigil
       unquote(verified_routes())
   
       # New Components
       defmodule NC do
         @moduledoc false
         defdelegate button(assigns), to: PetalProWeb.NewComponents.Button
       end
     end
   end
   
           

10. Finally, you can use the NC module to add your new component to a template:
    heex

              <NC.button
      label={gettext ("Get started")}
      link_type="a"
      color="primary"
      to={~p"/auth/register"}
      size="lg"
    />
    
            

11. Now you can modify the component styles in nc_default.css file however you like, without affecting Petal Components.