Svelte: Is possible to change style values based on state? (like Styled-components for React does?)

[vladejs]

Example: set the button's color to blue if there is a user property on the store.

<button class="info"> Get Information </button>

<style>
  .info {
    color: $user ? 'blue' : 'red';
  }
</style>

[Rich-Harris]

Easiest way is to use inline styles:

<button style="color: {user ? 'blue' : 'red'}">
  Get Information
</button>

[vladejs]

Hard cheese.

I use sass heavily in the style section, so the real hit would be suporting the styled-components approach.

I believe that the core of this issue would be answering the question: Is that doable?

Thanks

[Rich-Harris]

The equivalent of the example on the front of the styled-components website would be this:

<button>Normal button</button>
<button class="primary">Primary button</button>

<style>
  button {
    font-size: 18px;
    border-radius: 3px;
    padding: 0.5em 1em;
    margin: 0 1em;
    background: transparent;
    color: palevioletred;
    border: 2px solid palevioletred;
  }

  .primary {
    background: palevioletred;
    color: white;
  }
</style>

This is arguably better since there's no duplication in the CSSOM.

Or you can CSS variables, if the different options aren't known ahead of time.

[Rich-Harris]

(To clarify: no, you can't use component state in <style>, because the styles are shared between all component instances. It would be very inefficient for the browser to have a copy of the styles per component; for coarse-grained customisation like the primary button, classes are the preferred mechanism, and for fine-grained per-component customisation, inline styles are the appropriate tool for the job.)

[louisgjohnson]

@vladejs
this is my solution for dynamic styling but yeah its a bit hacky and its just inline styling..

<button style={styles}>my button</button>
<script>
export default {
  computed: {
    styles: (props) => getStyles(props)
  }
}
const getStyles = ({ primary }) => (
   `
      color: black;
      background: ${primary ? 'palevioletred' : 'transparent'}
   `
);
</script>

[Conduitry]

Closing this, as you can already use CSS variables and/or inline styles - and there's already a ticket (#758) for smartly generating code using inline styles and CSS variables at compile time.

[rbenzazon]

I need to use media queries relative to screen size to switch between 2 background images, which is easy using classes but the problem is that the image path depend on a variable value. I would like to keep the css only styling. In this case the only solution I consider is to create a css rule from javascript which is ugly/heavy especially if you need to support older browser. Being able to get the reference to one of the rule of a component would help a lot and keep the code clean / light. It could be a feature of svelte.

[saga95]

Easiest way is to use inline styles:

<button style="color: {user ? 'blue' : 'red'}">
  Get Information
</button>

thanks alot