Salut les gars, j'ai créé un composant de réaction. en réaction, je pourrais facilement attacher un style css à mon composant via className = "some_style"
mais comment attacher mon composant stylé à ces accessoires className.
dire par comme
<Component className="styled_component" />
Je ne sais pas quelle approche je vais utiliser? Merci
3 Réponses :
Eh bien, vous ne pouvez pas parce que vous ne savez pas dans quel nom de classe votre css-in-js sera compilé. Le composant stylisé vous aide à écrire le CSS d'un composant particulier dans JS. Vous pouvez essayer d'écrire le CSS de dans le fichier Component.js. Si la classe CSS est réutilisable, créez un fichier CSS commun et incluez-le dans index.js / App.js
en fait son exigence obligatoire pour une bibliothèque appelée reactour. ce qui est que je dois passer comme style à ses accessoires className. mais j'ai préféré avec la manière de composant stylisé. toute suggestion ? :)
Le composant stylisé a également sa propre méthodologie qui ne vous suggérera pas de le faire. Si vous rencontrez une solution, ce serait un hack. Mieux vaut créer un fichier style.css dans lequel vous déclarez des noms de classe statiques.
Lorsque vous utilisez des composants stylisés, vous n'avez plus à utiliser l'accessoire className sur vos composants. Disons que vous avez un div que vous voulez styliser. Déclarez d'abord le div comme un composant stylé.
return( <StyledDiv /> )
Remarquez comment j'utilise styled. div car c'est un élément div que j'utilise. Ensuite, pour rendre ce composant, vous faites la même chose que vous le feriez avec n'importe quel autre composant.
const StyledDiv = styled.div` background-color: blue; `
Le div sera ensuite rendu avec le css que vous lui avez appliqué, vous n'avez pas à interagir avec className .
en fait son exigence obligatoire pour une bibliothèque appelée reactour. ce qui est que je dois passer comme style à ses accessoires className. mais j'ai préféré avec la manière de composant stylisé. toute suggestion ? :)
Eh bien, il semblerait que vous utilisez la mauvaise solution pour votre css. Peut-être qu'au lieu de déclarer des composants stylés, vous devriez utiliser l'approche traditionnelle d'un fichier css séparé, afin de connaître les noms de classe à l'exécution.
Cela fonctionne généralement bien pour moi (même si j'ai trouvé cette question de manière hilarante parce que j'ai des problèmes avec une situation spécifique en utilisant className ):
const Component = styled.div.attrs({
className: '[add your classes here]'
})
p >
Cela devrait probablement être un commentaire.
«Composants stylisés» signifie littéralement que vous créez un nouveau type de composant stylisé. Il n'est pas nécessaire de créer un style basé sur des classes lors de l'utilisation de composants stylisés, c'est tout l'intérêt. Lisez la documentation sur les composants stylisés, cette question implique que vous ne comprenez pas ce que sont les composants stylisés ou comment les utiliser. Une fois que vous avez compris le sujet général, si vous avez toujours un problème spécifique, postez-le sur la pile et nous pouvons vous aider.
en fait, je comprends ce que fait le composant stylisé. J'ai juste besoin de le faire car une bibliothèque (aide à la réactivité) s'attend à fournir un style via des accessoires className. :)
Cela ne ressort pas clairement de votre question, veuillez reformuler la question pour la clarifier. Essayez-vous d'ajouter une classe à un composant stylisé? Au lieu de suivre chaque réponse avec le vrai problème, expliquez le problème réel dans la question.
Si ce que vous essayez de faire est d'attacher les propriétés de style d'un composant stylisé à un composant à l'aide de classes, n'utilisez tout simplement pas de composants stylisés, créez une classe css et utilisez-la à la place.