Easiest way to style links in basic HTML widget?
minthemiddle opened this issue · comments
Martin commented
I want to give my links a different color in a basic pandoc-to-html that I render with Übersicht.
What's the easiest way to do?
What I use in the widget
- I render a markdown to HTML with pandoc
- I use `import { css } from "uebersicht"
- I use
dangerouslySetInnerHTML
to display the rendered HTML - See full code in "Widget"
What I tried
- Pass the CSS to pandoc with
--css style.css
- Add the style as
<style>
in the rendered output
Thanks for your help!
Widget:
import { css } from "uebersicht"
const parseCalendar = '/usr/local/bin/pandoc "file.md"';
export const command = parseCalendar;
export const refreshFrequency = 5000; // msexport const className =
margin: auto; padding: 30px 30px 20px; font-family: -apple-system; color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 300; line-height: 1.5;
export const render = ({ output }) => (
<div dangerouslySetInnerHTML={{__html: output }} />
)
Than Hutchins commented
- I assume your
className
is wrapped in backticks (e.g.export const className = `margin auto; ... `
.) If it isn't, it should be. - You can use emotion's nested syntax with
className
. With that, you can then style the links however you want.
For example:
export const className = `
margin: auto;
padding: 30px 30px 20px;
/* the rest of your css */
/* nested selectors */
a {
/* ... */
}
`