Copy and modify a component

How to copy over a component from Radix parent theme, to our own Sub-theme and start using that instead.

There are many use cases that you'd like to modify an original component from Radix parent theme, so the idea here is that in-case you are not able to modify the component using different available properties, variables and utility classes, you can just copy over the component to your own Sub-theme and modify the markup there.

For example, let's take Block component as an example.

Step 1: Copy the component over

You can go to web/themes/contrib/radix/components directory and copy and paste the theme into your own SUBTHEME_NAME/components directory, or you can use drupal-radix-cli

Within your Sub-theme directory, open up the CLI and run:

drupal-radix-cli add

And then select the component you'd like to copy over to your Sub-theme, once that's done you'd see a new block component directory under the components

Now go ahead and change whatever you'd like in that component.

Note that simply copying it over, doesn't make your theme read that specific component.

Now for our theme to read our new component instead of the default Radix one, we need to update our templates, in our use case search within your Sub-theme to see where the radix:block is being used and changed that namespace to SUBTHEME_NAME:block

For example there are several templates that use the block component from Radix but imagine if we only want the local tasks to behave differently, we can change the block--local-tasks-block.html.twig template namespace accordingly and it will pickup the new component moving forward.

Note that within your new block directory, you can modify your scss file or create a _block.js file and do any JS work needed there, those assets will be loaded along the block.twig file thanks to SDC.