Styling

src/components/tree/Tree.module.css

@@ -0,0 +1,12 @@
+.title {
+  background-color: rgba(14, 116, 144, 0.7);
+  color: white;
+  justify-content: space-between;
+  display: flex;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.title > div {
+  display: inline-block;
+}

src/components/tree/Tree.tsx

@@ -1,6 +1,7 @@
 import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
 import { Component, JSXElement, Show } from 'solid-js';
+import style from './Tree.module.css';
 
 interface Props {
   title: string | JSXElement;
@@ -24,7 +25,7 @@ const Tree: Component<Props> = ({ title, content, subTree }) => {
       sx={{ width: 'calc(100% - 5px)' }}
     >
       <Item sx={{ width: 'calc(100% - 1px)' }}>
-        <div>{title}</div>
+        <div class={style.title}>{title}</div>
         <Show when={content !== undefined}>
           <div>{content}</div>
         </Show>