El problema es que el css en los componentes de estilo solo se implementa en el proyecto react-beautiful-dnd si los valores de las propiedades de CSS están entre corchetes de javascript ${"50%"}, ${"100px"}, ${"orange "}.

Mi pregunta es ¿por qué ocurre esto?

"App.styles.js" el archivo de componentes con estilo. ¡Nota! la propiedad height y border-color no están rodeadas por corchetes de javascript.

 import styled from 'styled-components' export const DroppableContainer = styled.div` display: ${'flex'}; overflow: ${'auto'}; border: ${"1px solid"}; border-color: "orange"; width: ${"50%"}; height: "100px"; ` export const DraggableItem = styled.div` font-size: ${"60px"}; flex: ${"auto"}; text-align: ${"center"}; background-color: ${({dragging}) => dragging ? "rgb(11, 138, 79)" : "rgb(156, 186, 172)"}; `

"App.js" La declaración de retorno para el componente React App, que usa el

 return ( <div> <DragDropContext onDragEnd={result => onDragEnd(result)}> <Droppable droppableId="droppable" direction="horizontal"> {(provided, snapshot) => ( <DroppableContainer ref={provided.innerRef} {...provided.droppableProps} > {items.map((item, index) => ( <Draggable key={item.id} draggableId={item.id} index={index}> {(provided, snapshot) => ( <DraggableItem dragging={snapshot.isDragging} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} style={{ ...provided.draggableProps.style,}} > {item.content} </DraggableItem> )} </Draggable> ))} {provided.placeholder} </DroppableContainer> )} </Droppable> </DragDropContext> </div> );

Como puede ver, la altura del componente no es de 100 px y el color del borde no es naranja.