CODEWITHSUNDEEP
htmlcsspolymerpolymer-2.x
Madeyedexter
Madeyedexter

Reputation: 1193

Style a polymer element import from external stylesheet

I am using the polymer paper-card element from the polymer catalog.

I am able to specify a mixin from within my html file by using:

<style is="custom-style">
paper-card {
  width:300px; 
  --paper-card-header:{width:200px;
  height: 200px;
  margin: 25px auto;
  border-radius: 200px;
};
}
</style>

How can I specify the same style from an external stylesheet? I do not want to change the contents of paper-card.html import file.

Thanks.

Upvotes: 1

Views: 967

Answers (1)

Evan Bechtol
Evan Bechtol

Reputation: 2865

To include the styles for a component in an external stylesheet, you can do the following:

  • If the stylesheet is a CSS file, simply import it as you would any other stylesheet. This has been deprecated

  • You can create a stylesheet in the same way that you would create a custom Polymer component:

<dom-module id="global-styles">
  <template>
    <style>
      .card {
        // Your styles go here as normal
      }
    </style>
  </template>
</dom-module>

You import this into your Polymer component that you wish to apply them to:

<link rel="import" href="../path/to/my/external/styles">
<dom-module id="some-other-component">
  <template>
    <style include="global-styles"></style>
      <style>
        //Some more styles
      </style>
  </template>
</dom-module>

For more info on this, and specific guidelines / rules, check out the Polymer Docs on this!

Upvotes: 1

Related Questions