Pages
Introduction
Getting Started
Recipes
Reference
Literals
Arrays
Tuples
Type System
Functions
Modules
Records
Enums
Built-in Types
Constants
Equality
Stores
Routing
Comments
Control Expressions
Components
Properties
Computed Properties
Styling Elements
Connecting Stores
Using Providers
Internal State
Referencing Entities
Global Components
Lifecycle Functions
Directives
JavaScript Interop
Environment Variables
Packages
Styling with CSS
After you have something on the screen you probably want to add some styles to it. This is easy to do in Mint, you can even do it with simple CSS!
In components, styles can be defined with an identifier, then applied to HTML
using the identifier as a CSS class. A style can contain any number of CSS
definitions, sub rules, media queries,
if
and
case
statements.
A style is scoped to the component it's defined in.
This is how it looks when we style the component what we just created:
component Main {
style button {
background: red;
color: white;
border: 0;
}
fun render : Html {
<button::button>
"Click ME!"
</button>
}
}
The button is now red with white text.