Problems with Styling

[itscLx]

Hello,

I have implemented kbar in my ReactJS project following the instructions. Unfortunately the styling is not active for me. But I can't find any tutorial or idea what could be the problem.

import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { BrowserRouter } from 'react-router-dom'
import {
    KBarProvider,
    KBarPortal,
    KBarPositioner,
    KBarAnimator,
    KBarSearch,
    useMatches,
    KBarResults,
} from 'kbar'

const actions = [
    {
        id: 'blog',
        name: 'Blog',
        shortcut: ['b'],
        keywords: 'writing words',
        perform: () => (window.location.pathname = 'blog'),
    },
    {
        id: 'contact',
        name: 'Contact',
        shortcut: ['c'],
        keywords: 'email',
        perform: () => (window.location.pathname = 'contact'),
    },
]

function RenderResults() {
    const { results } = useMatches()

    return (
        <KBarResults
            items={results}
            onRender={({ item, active }) =>
                typeof item === 'string' ? (
                    <div>{item}</div>
                ) : (
                    <div
                        style={{
                            background: active ? '#eee' : 'transparent',
                        }}
                    >
                        {item.name}
                    </div>
                )
            }
        />
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <BrowserRouter>
        <KBarProvider actions={actions}>
            <KBarPortal>
                <KBarPositioner>
                    <KBarAnimator>
                        <KBarSearch />
                        <RenderResults />
                    </KBarAnimator>
                </KBarPositioner>
            </KBarPortal>
            <App />
        </KBarProvider>
        ;
    </BrowserRouter>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

Do you have any idea what the problem is?

Many greetings,
Christian

[emiliosheinz]

Looks like kbar comes without styles by default. For more information check this issue: #334