Skip to content

Instantly share code, notes, and snippets.

@Zeroto
Created November 13, 2020 10:19
Show Gist options
  • Save Zeroto/dbeaa9112927728c8c5a5ea8dd961859 to your computer and use it in GitHub Desktop.
Save Zeroto/dbeaa9112927728c8c5a5ea8dd961859 to your computer and use it in GitHub Desktop.
let styles = StyledComponents.import "./test.module.css"
let view (model : Model) (dispatch : Msg -> unit) =
div [styles "test"] [str "test"]
<html>
<head>
<style>._311kSsEcp617TYlmgIvyg4 { background-color: #FF0000; }
</style>
</head>
<body>
<div class="_311kSsEcp617TYlmgIvyg4">test</div>
</body>
</html>
module StyledComponents
open Fable.Core
open Fable.Core.JsInterop
open Fable.React.Props
[<Emit("$0[$1]")>]
let private getProp (x: obj) (key: string) : obj = jsNative
let inline SClass (styles: obj) (name: string): HTMLAttr =
!!("className", getProp styles name)
let inline import moduleName =
let x = importAll<obj> moduleName
fun s -> SClass x s
.test {
background-color: "#FF0000"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment