Any CSS-in-JS solutions suitable for Vue 3 with JSX?

[nelk98]

RT

[Shyam-Chen]

• styled-jsx

<script lang="tsx">
import { defineComponent, ref } from 'vue';

export default defineComponent(() => {
  const count = ref(4);
  const inc = () => (count.value += 1);

  return () => (
    <button class="my-button" onClick={inc}>
      script {count.value}
    </button>
  );
});
</script>

<style scoped>
.my-button {
  color: darkcyan;
  background-color: azure;
}
</style>

---

• styled-components

[aniruddhaadak80]

Hey @nelk98 ,

Here are a few CSS-in-JS solutions suitable for Vue 3 with JSX, along with brief examples:

1. Emotion:

   npm install @emotion/vue @emotion/css

   <script setup>
   import { css } from '@emotion/css'
   
   const buttonStyle = css`
     background-color: hotpink;
     color: white;
     padding: 10px;
     border: none;
     border-radius: 5px;
   `
   </script>
   
   <template>
     <button class={buttonStyle}>Click Me</button>
   </template>

2. Styled Components:

   npm install vue3-styled-components

   <script setup>
   import styled from 'vue3-styled-components'
   
   const Button = styled('button')`
     background-color: blue;
     color: white;
     padding: 10px;
     border: none;
     border-radius: 5px;
   `
   </script>
   
   <template>
     <Button>Click Me</Button>
   </template>

3. Vue's built-in Composition API (for reactive styles):

   <script setup>
   import { ref } from 'vue'
   
   const isActive = ref(false)
   
   const buttonStyle = {
     backgroundColor: isActive.value ? 'green' : 'red',
     color: 'white',
     padding: '10px',
     border: 'none',
     borderRadius: '5px',
   }
   
   const toggle = () => {
     isActive.value = !isActive.value
   }
   </script>
   
   <template>
     <button :style="buttonStyle" @click="toggle">Toggle Me</button>
   </template>

These examples illustrate how to implement CSS-in-JS solutions in a Vue 3 application using JSX.

Thanks .