Styled

Styled is a Rust crate that provides a simple way to apply scoped styling to your Leptos components. This means that any styles passed to the Styled component will only affect the elements within it, and won't affect any other elements on the page.

One of the benefits of using the Styled component for scoped styling is that you don't need to use classes and ids all over your HTML markup. Instead, you can define the styles for a particular component in one place and apply them to the component using the Styled component. This keeps your markup clean and makes it easier to maintain your styles.

Credit goes to the Stylist library for the styling macro!

Installation

Add styled to your Cargo.toml file:

toml [dependencies] styled = "0.1"

Usage

To use the Styled component, import it into your Rust file:

rust use styled::{Styled, style};

You can then use the Styled component to apply styles to any other component:

```rust

[component]

pub fn MyComponent() { let cx = Context::new();

// Define some styles to apply to the elements within the Styled component
let styles = style!(
  div {
    "background-color": "red";
    "color": "white";
    "font-size": "20px";
  }
);

view! {
    cx,
    // Wrap the elements you want to style in the Styled component
    // The styles property of Styled takes a Result of styles for convenience
    <Styled styles={styles}>
        <div>"This text should be red with white text."</div>
    </Styled>

    // This text should not be affected by the styles applied to the Styled component
    <div>"This text should be unstyled."</div>
}

} ```

In this example, the Styled component is used to apply the styles defined in the styles variable to the div element within it. The final div element is not wrapped in the Styled component, so it should not be affected by the styles applied to the other elements.

How it works

The Styled component generates a unique class name for the styles themselves, and applies those styles to a style element within the component. The class name is then used to prefix any CSS selectors within the Styled component, ensuring that they only apply to the elements within the Styled component.