10

Create a stylesheet

Define CSS to style your components.

We’ve shown you have to define properties with JavaScript in the <script> tag of your custom component, but you may also want to define styles in a stylesheet. In the <style> element, you can define branding, hover styles, responsive styles, dark mode, and more through CSS or by passing in properties defined in the <script> tag. In the visual editor, you can’t modify the CSS values unless those values are set by properties in the <script> tag.

Pass JavaScript into the <style> tag

<style> tags support variables defined in your <script> tag. Pass them as CSS values with the set() function. If the value you want to access is inside of an object or array, you can use dot notation. In your template, you’d then pass the CSS variable.

<script>
  export const config = {
    label: "custom-body",
    presets: [
        {
          label: "custom-body",
          content: `<custom-body></custom-body>`
        }
      ]
  };
  export const props = Component.defineProps({
    background: {
      section: 'Call-out',
      label: 'Background',
      schema: Component.props.string(['rgb(60, 179, 113)','rgb(186, 255, 164)']).optional(),
      type: 'select',
      options: [
        { label: 'green', value: 'rgb(60, 179, 113)' },
        { label: 'light-green', value: 'rgb(186, 255, 164)' }
      ]
    },
    color: {
      section: 'Call-out',
      label: 'Color',
      schema: Component.props.string().optional(),
      type: 'color',
    }
  });
</script>
<style>
  .call-out {
    background: set('props.background');
    color: set('props.color');
  }
</style>
<template>
  <x-heading-1>
    Welcome!
  </x-heading-1>
  <x-paragraph>
    Introduction
  </x-paragraph>
  <div class="call-out">
    Something you want to emphasize
  </div>
</template>

How to use multiple <style> tags

Use multiple style elements to set conditional or standlone styles. By default, we merge all <style> tags together to reduce code bloat, but you can change this with the #isolated attribute.

For example, these two <style> tags would be merged:

Source:

<style>
.a {
  background: blue;
}
</style>
<style>
.b {
  background: red;
}
</style>

Output:

<style>
.a {
  background: blue;
}
.b {
  background: red;
}
</style>

Set conditions

You can use conditional directives (#if, #else-if, #else) to render CSS.

<style #if="variant === 'primary'">
 .primary-button {
   background: blue;
   color: white;
 }
</style>
<style #else>
 .default-button {
   background: white;
   color: blue;
 }
</style>

Isolate styles

Sometimes you need a particular <style> tag to live on its own and not merge with other <style> tags. For instance, you might want this when sending emails to Gmail. If the <style> element contains any invalid CSS, Gmail will strip all styles. But if you wrap CSS that might be invalid in a #isolated style element, Gmail will not strip the rest of the CSS.

<style #isolated>
.a {
  background: blue;
}
</style>
<style>
.b {
  background: red;
}
</style>

You can also group styles together by assigning a value to the #isolated attribute. This can prevent people from receiving a half-styled email; when an email client removes a <style> block, it will also remove all styles with the same value. This practice can help reduce code bloat too.

<style #isolated="outook-web">
[class~="a"] {
  background: blue;
}
</style>
<style #isolated="outook-web">
[class~="outlook-hide"] {
  display: none;
}
</style>
<style>
.b {
  background: red;
}
</style>
<style #isolated="interactive">
input:checked ~ .c {
  background: green;
}
</style>

Some clients, like Thunderbird, do not support @media queries, so to work around that, use our media attribute on an isolated style to set screen breaks. We combine <style> tags with the same isolated attribute values (like #isolated="thunderbird") that also have identical media attributes; however, if the media attributes aren’t identical, then the styles will apply to different break points.

<style media="(min-width:600px)" #isolated="thunderbird">
.moz-text-html .test{background:red;}
</style>

In the example above, we prefixed the class to specify the Thunderbird email client - .moz-text-html. You’ll want to do the same for any other email clients you want to target.