This answers the question: "How do I style my Solid app"? It will compare different ap

Currently <a href="https://docs.solidjs.com/start/core-concepts/css-and-styling" rel="

Put the style into a string and it worked. <div class="

Styling Guide [How-To Guide] about solid-docs-next HOT 11 CLOSED

solidjs commented on June 30, 2024

Styling Guide [How-To Guide]

from solid-docs-next.

Comments (11)

EnterpriseGoose commented on June 30, 2024 1

Hello, while trying to use the docs to figure out css modules I noticed that the css modules example is not the greatest. While it technically works, using import * as styles from <x> is not the best way to accomplish this, and it will create problems when using typescript. Instead the pattern import styles from <x> should be used. Additionally, the pattern {`${}`} doesn't need to be used, it can just be {}.
Should I create a pull request to address these issues? They're pretty unimportant, but for anyone else attempting to use typescript with modules it could be very helpful.

from solid-docs-next.

boehs commented on June 30, 2024

In progress with solid-start, consider migrating to normal solid

from solid-docs-next.

boehs commented on June 30, 2024

Currently https://docs.solidjs.com/start/core-concepts/css-and-styling

from solid-docs-next.

krave1986 commented on June 30, 2024

Glad to found this one! Can we write CSS directly in .jsx or .tsx file? I have tried to use <Portal> to insert a <style> element into <head> but failed.

This is how I tried:

<Portal mount={document.head}>
  <style>
    * {
      color: "blue"
    }
  </style>
</Portal>

But solid complains about the syntax.

I used to use vue and svelte. This is a natural way to write styles in components. I don't need switch to a CSS file to write styles for the tags reside in component file.

from solid-docs-next.

krave1986 commented on June 30, 2024

Put the style into a string and it worked.

<Portal mount={document.head}>
  <style>
    {
      `
        * {
          color: ${color()}
        }

        div {
          font-weight: bold;
        }
      `
    }
  </style>
</Portal>

I also put a signal into the style and now the style is reactive.

from solid-docs-next.

boehs commented on June 30, 2024

I've thought about this a bit as I was writing, and I couldn't think of a reason not to do it, but also I've never seen this pattern before so I thought there must be something I was missing.

@nksaraf, I hope you don't mind sharing your thoughts on this?

from solid-docs-next.

nksaraf commented on June 30, 2024

Reason number 1 would be SSR support, we dont statically analyze this and Portal to document.head won't work on the server. We do have Style component from solid-meta that could be used like this.

from solid-docs-next.

nksaraf commented on June 30, 2024

Another reason is that the styles are not actually scoped to the components in the file.. they will be global so it's slightly deceiving.

from solid-docs-next.

krave1986 commented on June 30, 2024

The missing piece here might be the motivation of both Vue and Svelte choosing single file component design: why sfc and The zen of Just Writing CSS.

For me, look at the dom fragment which I concern without jumping between component file and css file back and forth is real convenience.

Vue choose global <style> as the default option and Svelte choose scoped <style> the other way around. But both of them support both global and scoped styles because there are indeed use cases for both things.

For scoped styles, Vue and Svelte achieve the feature based on their tooling. Since Solid.js did not provide first class support. Here is how I forge the attributes based solution right now.

   const random = ("" + Math.random()).replace(".", "");
   
   return (
       <>
           <div {...{ [`data-${random}`]: "" }}>abc</div>
           <Portal mount={document.head}>
               <style>
                   {`
                       [data-${random}] {
                           color: red;
                       }
                   `}
               </style>
           </Portal>
       </>
   )

As far as I know, Vue 3 supports v-bind to accomplish dynamic CSS feature. But it is based on CSS custom variables, the declarations of rules are fixed. Things look a little same on Svelte side. Ideally, if Solid.js could provide support for such feature, a <Style> component may be, Solid.js could prevail because it can make dynamic styles real.

from solid-docs-next.

krave1986 commented on June 30, 2024

The problem I found in action is redundant style tags.

If I define a component like the way above and use it in several places, the <style> tags would be duplicated. When I take const random = ("" + Math.random()).replace(".", ""); out of the component function, every component will share same random constant while all the same <style> tags will be inserted into <head>.

As you can see, changing scope from per instance to per component is trivial.

from solid-docs-next.

michaelessiet commented on June 30, 2024

Hello, while trying to use the docs to figure out css modules I noticed that the css modules example is not the greatest. While it technically works, using import * as styles from <x> is not the best way to accomplish this, and it will create problems when using typescript. Instead the pattern import styles from <x> should be used. Additionally, the pattern {`${}`} doesn't need to be used, it can just be {}. Should I create a pull request to address these issues? They're pretty unimportant, but for anyone else attempting to use typescript with modules it could be very helpful.

This will be addressed in the coming merge this evening

from solid-docs-next.

Styling Guide [How-To Guide] about solid-docs-next HOT 11 CLOSED

Comments (11)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent