Estoy construyendo una aplicación web en ReactJS. tengo lo siguiente:
const MyComponent = (props: { array: Array<Data> }) => { const styles = mergeStyleSets({ container: { backgroundColor: transparent, }, item: { backgroundColor: "#ccc", }, itemContent: { color: "#000", }, }); return ( <div class={styles.container}> {props.array.map((x, i) => ( <div key={i} class={styles.item}> <div class={styles.itemContent}></div> </div> ))} </div> ) };Esto generará un contenedor con algunos elementos, todos con el mismo fondo y el mismo color de texto.
Ahora quiero tener fondos y colores alternos, por lo tanto, trato de usar nth-child(odd) y obtengo un backgroundColor y un color diferentes para los elementos impares:
const styles = mergeStyleSets({ container: { backgroundColor: transparent, }, item: { backgroundColor: #ccc, selectors: { ":nth-child(odd)": { backgroundColor: "#ddd", selectors: { itemContent: { color: "#fff", }, }, }, }, }, itemContent: { color: "#000", }, }); Como puede ver, necesito hacer referencia a la clase itemContent dentro del selector de item . Pero mi solución no está funcionando. ¿Cómo puedo conseguir esto?
Puede dar a cada fila un estilo predeterminado y anular las impares. El siguiente fragmento lo muestra en color prop.
function App() { const styles = mergeStyleSets({ item: { // Default styles. backgroundColor: '#ccc', color: "black", // Override odd rows. ":nth-child(odd)": { backgroundColor: "#ddd", color: "red", }, }, }) return ( <> {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(x => ( <div key={x} className={styles.item}> <div>{x}</div> </div> ))} </> ) }Debe decidir si desea seguir con la parte CSS o JS. Si quieres usar CSS, se vería así:
function App() { const styles = mergeStyleSets({ item: { backgroundColor: '#ccc', ":nth-child(odd)": { backgroundColor: "#ddd", color: "red", '>div': { // Select all direct divs of odd items. color: "red", }, }, }, }) return ( <> {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(x => ( <div key={x} className={styles.item}> <div>{x}</div> </div> ))} </> ) }Optar por la solución JS sería verificar manualmente si el índice es par o impar y aplicar la clase CSS en consecuencia.
function App() { const styles = mergeStyleSets({ item: { backgroundColor: '#ccc', ":nth-child(odd)": { backgroundColor: "#ddd", }, }, odd: { color: "red", }, even: { color: 'initial' } }) return ( <> {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((x, i) => ( <div key={x} className={styles.item}> <div className={i % 2 === 0 ? styles.odd : styles.even}>{x}</div> </div> ))} </> ) } Las versiones más recientes de Fluent ya no requieren el uso de palabras clave de selectors .