How does one style/customize an unsuported html tag? <mark>

[lucasrla]

Hi all,

Context: I am using Theme UI (and MDX) in a Gatsby website.

I would like to customize the style (and also leverage Theme UI's dark/light Color Modes) of <mark> tags inside MDX files.

Unfortunately, it seems <mark> is not supported by the theme.styles object: https://theme-ui.com/theme-spec/#styles.

What would you suggest me to do?

Thanks!

[hasparus]

Hi @lucasrla!

You can add mark to the components dict.

// src/gatsby-plugin-theme-ui/components.js (if you are using gatsby-plugin-theme-ui)
const components = {
  mark: (props) => {
    return <mark sx={{ bg: 'highlight' }} {...props} />;
  }
};

export default components;

Take a look at

• https://theme-ui.com/packages/gatsby-plugin#components
• https://theme-ui.com/mdx-components

[lucasrla]

Thank you for the quick reply, @hasparus!

I followed your pointers and have now managed to get a component up and running!

For the record to fellow users coming from the future, here is my working code:

// src/gatsby-plugin-theme-ui/index.js

export default {
  // ...
  colors {
   // ...
   marked: '#ffff00',
   // ...
   modes: { 
     // ...
     dark: {
       // ...
       marked: '#f9a825'
     }
  }
}

// src/gatsby-plugin-theme-ui/components.js

/** @jsx jsx */
import { jsx } from 'theme-ui'

const components = {
  mark: props => (
    <mark {...props} sx={{ backgroundColor: 'marked' }}>
        {props.children}
    </mark>
  )
};

export default components;

The examples below also helped me figure it out:

• https://theme-ui.com/guides/linked-headings
• https://theme-ui.com/guides/how-it-works

Thanks again!