eboody / styled Goto Github PK
View Code? Open in Web Editor NEWA simple solution for scoped styles in Leptos
A simple solution for scoped styles in Leptos
Cargo/Rust 1.79 nightly
Leptos 0.6.9 nightly
Like a couple of others, I have found Styled
and was hoping that it would be a simple alternative to Stylers
and Tailwind
. Trouble is that none of the examples work. It would be really cool if [a] the examples were updated so that they don't use cx
any more and [b] if a complete Rust project could be supplied, one that we could clone, build and run π
In leptos 0.5, the view
macro doesn't need cx
anymore, which breaks your code.
I was trying to make my own leptos button component and wanted to resize the font in the button like so:
#[component]
fn MyButton(
#[prop(into)] on_click: Callback<MouseEvent>,
children: Children,
) -> impl IntoView {
let style = style! {
button {
font-size: 1em;
}
};
styled::view! {
style,
<button on:click=on_click>
{children()}
</button>
}
}
Trying to compile like this results in following error:
error: expected at least one digit in exponent
--> src/app.rs:52:24
|
52 | font-size: 1em;
| ^^^
For now I can work around this by setting the size to 100%, but I'd still like to use em
can not pass in compile.
~~//
the trait bound `&fn(leptos_reactive::scope::Scope, StyleProps) -> impl leptos_dom::IntoView {Style}: ComponentConstructor<_>` is not satisfied
the trait `ComponentConstructor<_>` is not implemented for `&fn(leptos_reactive::scope::Scope, StyleProps) -> impl leptos_dom::IntoView {Style}`rustc[Click for full compiler diagnostic](rust-analyzer-diagnostics-view:/diagnostic%20message%20%5B0%5D?0#file%3A%2F%2F%2FUsers%2Flennon%2FDocuments%2FGitHub%2Fmoerae_view%2Fsrc%2Fapplication.rs)
lib.rs(21, 9): Actual error occurred here
lib.rs(21, 9): Error originated from macro call here
lib.rs(296, 13): required by a bound in `component_view`
the trait bound `fn(leptos_reactive::scope::Scope, StyleProps) -> impl leptos_dom::IntoView {Style}: leptos::Component<_>` is not satisfied
the trait `leptos::Component<_>` is not implemented for fn item `fn(leptos_reactive::scope::Scope, StyleProps) -> impl leptos_dom::IntoView {Style}`rustc[Click for full compiler diagnostic](rust-analyzer-diagnostics-view:/diagnostic%20message%20%5B1%5D?1#file%3A%2F%2F%2FUsers%2Flennon%2FDocuments%2FGitHub%2Fmoerae_view%2Fsrc%2Fapplication.rs)
lib.rs(21, 9): Actual error occurred here
lib.rs(21, 9): Error originated from macro call here
lib.rs(289, 15): required by a bound in `component_props_builder`
Hello,
There doesn't appear to be any LICENSE file in this repo, and was hoping I could get some clarification on that.
I noticed that the Cargo.toml files mention the APL-1.0 license in it, which appears to be this: https://en.wikipedia.org/wiki/Adaptive_Public_License
Was that the intended license?
Hi there attempting to get a leptos app up and running with server side rendering (ssr) and I want styling (without tailwind). Tried using crates like stylers but ran into issues of leptos build orders and such. I have now set my eyes on your little project in an attempt to hopefully get this working. However when i tried it out i was not able to get it to work. cargo-leptos build
seems to work fine (funny enough) but cargo leptos serve
and cargo-leptos watch
both seem to fail with
thread 'main' panicked at /home/darren/.cargo/registry/src/index.crates.io-6f17d22bba15001f/js-sys-0.3.64/src/lib.rs:5847:9:
cannot call wasm-bindgen imported functions on non-wasm targets
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread 'main' panicked at /home/darren/.cargo/registry/src/index.crates.io-6f17d22bba15001f/leptos_axum-0.4.8/src/lib.rs:1042:14:
called `Result::unwrap()` on an `Err` value: JoinError::Panic(Id(9), ...)
Now this is probably a cargo-leptos thing and probably has nothing to do with your package, but I'm hoping maybe you might have some idea how to fix and get what i want working.
And if you have no idea would greatly appreciate if you know of some examples of using component level styling with SSR that is not tailwind would also be appreciated.
I will most likely be reaching out to leptos team if you are unable to help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.