https://github.com/SaraVieira/cssx

CSS in MDX
https://github.com/SaraVieira/cssx

Last synced: 3 months ago
JSON representation

CSS in MDX

• Host: GitHub
• URL: https://github.com/SaraVieira/cssx
• Owner: SaraVieira
• License: mit
• Created: 2019-02-04T21:50:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-10-17T05:56:25.000Z (about 3 years ago)
• Last Synced: 2024-07-22T20:06:33.735Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 43 KB
• Stars: 83
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: Readme.md
  • License: License.md

Awesome Lists containing this project

README

        
# mdx-cssx

https://cssx.netlify.com

CSSX is CSS in MDX files.

## Why?

Why not?

## Usage

```bash

yarn add mdx-cssx

```

```bash

npm i mdx-cssx

```

```js

import ReactDOM from "react-dom"

import React from "react"

import App from "./App"

import CSSX from "mdx-cssx"

ReactDOM.render(

  

    

  ,

  document.getElementById("root")

)

```

Under the hood I use the `mdx-provider` so you can pass more components to it if you wish to override more

Then use it in your MDX files like so:

```md

# CSSX

CSSX is CSS in MDX

it uses emotion under the hood to create the styles.

## Why?

Why not?

```cssx

body {

    background: #d9d9d9;

    padding: 20px;

    justify-content: center;

    display: flex;

    height: 100vh;

    align-items: center;

    text-align: center;

}

h1 {

  color: blue;

}

pre {

  text-align: left;

}

```

...

## License

MIT License, see the included [License.md](License.md) file.