SolidJS•12mo ago

Why does solid-router break DaisyUI styles?

I have a solidJS app all setup and have used daisyUI for styling. However, when implementing solid-router, it breaks some of the functionality of the styling... especially the themes (no more dark mode sadcat

) Any thoughts or ideas? If you'd like to see any parts of my code feel free to ask!

16 Replies

dylancitoOP•12mo ago

index.tsx

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./index.css";

import App from "./App";
import Home from "./Home";
import Config from "./pages/Config";
import Scan from "./pages/Scan";
import Monitor from "./pages/Monitor";

render(
  () => (
    <Router>
      <Route path="/" component={App} />
      <Route path="/home" component={Home} />
      <Route path="/config" component={Config} />
      <Route path="/scan" component={Scan} />
      <Route path="/monitor" component={Monitor} />
    </Router>
  ),
  document.getElementById("root") as HTMLElement
);

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";
import "./index.css";

import App from "./App";
import Home from "./Home";
import Config from "./pages/Config";
import Scan from "./pages/Scan";
import Monitor from "./pages/Monitor";

render(
  () => (
    <Router>
      <Route path="/" component={App} />
      <Route path="/home" component={Home} />
      <Route path="/config" component={Config} />
      <Route path="/scan" component={Scan} />
      <Route path="/monitor" component={Monitor} />
    </Router>
  ),
  document.getElementById("root") as HTMLElement
);

dylancitoOP•12mo ago

i also noticed on this part of the docs, that its telling you to import Routes but when i tried that it wasn't working

dylancitoOP•12mo ago

lxsmnsyc•12mo ago

the docs is kinda behind, this is no longer the case

dylancitoOP•12mo ago

The docs seem all sorts of messed up rn… But either way I got the routes to work without' that import, but it messed up my daisyUI styles and I can’t for the life of me figure out why that would effect the styles

benten•12mo ago

i wouldn't rely on the docs atm, look at the source instead What exactly is broken with the themes? do you have a repo?

dylancitoOP•12mo ago

@benton__ @lxsmnsyc 🤖 thank you both for the replies. the issue was found to be conflicting styles with a date picking component that was being used on one of the pages after removing the date picking component, daisyUI works as expecting with solidrouter 👍

dylancitoOP•12mo ago

here's a better pic to see what was broken

dylancitoOP•12mo ago

right is how it should look, left is how it did look. daisyUI will follow your system theme and i had mine in dark mode

benten•12mo ago

glad you figured it out

dylancitoOP•12mo ago

what do you mean by source? source for the router? i did go off of the github readme for the router, but what about for other solidjs stuff are the docs not the place to look rn?

benten•12mo ago

just the stuff related to solid start newer betas

dylancitoOP•12mo ago

so the best place for solidjs docs is solidstart which is a different framework built on solidjs?

benten•12mo ago

no if it's pure solid the solid docs are fine

dylancitoOP•12mo ago

https://docs.solidjs.com/guides/how-to-guides/get-ready-for-solid/solid-best-practices https://docs.solidjs.com/guides/how-to-guides/accessibility-in-solid https://docs.solidjs.com/guides/how-to-guides/animations-in-solid/motionone-for-solid https://docs.solidjs.com/guides/how-to-guides/testing-in-solid/uvu https://docs.solidjs.com/references/concepts/ssr/hydration these docs are so half baked

Gaming

Programming

Why does solid-router break DaisyUI styles?