Parece que usa archivos de estilo de módulo para cargar clases y luego desea aplicarlos condicionalmente, en este caso sus datos son booleanos, ya sea true o false , y recuerde que las clases que lee de los módulos de estilo importados serán cambiados por algunos complementos antes de que se dirijan al navegador para convertirlo en un nombre de clase único como items_knc5d5sx , así que tenga en cuenta que debe usar classes.someClassName . algún nombre de clase en lugar de usar una cadena; de todos modos, aquí hay una pequeña sugerencia para su caso de uso:

 const createClassName = (classes, data) => { return `${classes.items} ${!data.isRead ? classes.Unread : ""}` };

Luego use esta función createClassName cuando renderice para crear las clases para cada elemento dinámicamente.

 {props.data.map((item) => ( <MenuItem className={createClassName(classes, item)} key={item.key} > }

Como se indica en los comentarios , no es necesario ese switch , lo cambié a una declaración if en línea .

Para obtener el comportamiento deseado, llama a la función createClassName en cada iteración de map() .

Fragmento de ejemplo:

 class Example extends React.Component { // Function to create item className createClassName = (data) => { return (data.isRead) ? 'ItemsUnread' : 'Items'; }; // Debug test data testData = [ { id: 1 }, { id: 2 }, { id: 3, isRead: true } ]; // Render render() { return ( <div> {this.testData.map((data) => { const className = this.createClassName(data); const content = `${data.id}: ${className}`; return <div className={className}>{content}</div> })} </div> ); } } ReactDOM.render(<Example />, document.body);

 .Items { color: green; } .ItemsUnread { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>