React Flow: adding Controls to example hides nodes and edges

#beginners #help #css #react

I'm new to React and I'm trying to learn React Flow.
I've been following examples on reactflow.dev, as well as tutorials that leverage same documentation on YouTube.

My problem is that I am not managing the color rendering and I would appreciate some help.

I've pasted one of the basic examples from the tutorial below.

First off, first time I ran the example, as provided in the tutorial, without the import "./index.css" ; line added, only the node boxes showed - no text visible. Is there a setting in my FireFox browser that require additional styling? I finally added the index.css import and the text appeared. None of the tutorial examples had to make this change???

Next, I proceeded to do more of the tutorial as they evolves the example.
I wanted to see the Background and Controls components but when they are added per the tutorial and video, my webpage only showed background color. Background dots and controls are hidden or don't show. I'm sure it's being rendered by not visible.

In the code below I commented out both of Background and Controls components to get the nodes to show again. But when either one is rendered the node text doesn't show.

Obviously, I'm missing something since multiple examples online and video don't add any new code. I'm a newbee when it comes to javascript and css and styling.

What am I missing???

Thanks

/* index.css */ :root { color-scheme: light dark; color: rgba(10, 4, 4, 0.87); background-color: #ccb6b6; }

`
/* App.jsx */
import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge, Controls } from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import "./index.css"
import { Background } from 'reactflow';

const initialNodes = [
{ id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
{ id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];

export default function App() {
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

const onNodesChange = useCallback(
(changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
[],
);
const onEdgesChange = useCallback(
(changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
[],
);
const onConnect = useCallback(
(params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
[],
);

return (