title: How to dynamically generate CSS class and/or set its property
body: <p>The title is not really a question it is more like an idea, I don't know what approach is best for my situation.</p>
  
  <p>So, the problem. I have some 3rd party component that have some complex structure and styling. Some part of it has some predefined CSS class that I can override with CSS in my surrounding component. Something like this:</p>
  
  <p>my component:</p>
  
  <pre><code>&lt;div class="my-cmp-container"&gt;
      &lt;some-3rd-party-cmp&gt;&lt;/some-3rd-party-cmp&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>3rd party component:</p>
  
  <pre><code>&lt;div class="3rd-party-css-class"&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>For example, <code>3rd-party-css-class</code> has style <code>background-color: #f00</code>, I can override it with <code>.my-cmp-container .3rd-party-css-class { background-color: #fff; }</code> etc. But. What if I need to set color dynamically, it's stored in a DB for example and I can't predefine each case in my class' CSS. I just have the color in hex.</p>
  
  <p>In theory I can generate unique string to set as CSS class for every instance of <code>some-3rd-party-cmp</code> and somehow generate CSS in my component? I'm lost a little, what is the best approach for this?</p>
  
  <p><strong>Edit:</strong> Code sample to illustrate the situation <a href="https://stackblitz.com/edit/angular-kxdatq" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-kxdatq</a></p>