J'essaie de créer un thème de l'application avec un œillet V2. J'utilise la forme et la formulaire de composants d'œillets à la caisse. Lorsque Formfield est actif, la bordure inférieure change de couleur sur défaut J'aime le fichier theme. composant. Tout ce qui est connecté au thème fonctionne bien (boutons couleurs, etc.) J'ai essayé de changer de couleur d'accent-1, mais il y a un manque de documentation à ce sujet. dans thème.js Je m'attends à changer cette couleur en gris mais il est toujours de couleur par défaut Accent-1 et je ne peux pas changer cette couleur de bordure.
3 Réponses :
J'ai aussi eu ce problème. J'ai pu trier de la sorte de résoudre en ajoutant une couleur globale appelée focus code>. Il ne semble pas que vous soyez capable de personnaliser les couleurs de la composante Formfield. Ceci fonctionne: H1>
let borderColor;
if (focus && !normalizedError) {
borderColor = 'focus';
} else if (normalizedError) {
borderColor = (border && border.error.color) || 'status-critical';
} else {
borderColor = (border && border.color) || 'border';
}
J'ai utilisé styled-composants ' étendre comme:
Voici quelques idées sur la façon de contrôler la couleur de votre thème:
global.colors code> et choisissez une couleur formulaire de couleur pour être la couleur de mise au point: li>
ol> xxx pré>
- Modifiez l'objet couleur de mise au point directement sur le thème: li>
OL>
<Grommet theme={customTheme}>
<Box pad="small" gap="medium" width="medium">
<TextInput placeholder="hi" />
<Anchor href="">Anchor</Anchor>
<Button label="Button" onClick={() => {}} />
</Box>
</Grommet>