Theme-ui: SCSS to Theme UI - Is this the proper way of using Theme UI

[stackrole-dev]

Describe the bug
Hi, I just started using Theme UI. I would like get feedback on this component. is this the proper way of using Theme UI or can this be improved further.

It would be great help to get feedback from the community, to improve my knowledge of Theme UI

/** @jsx jsx */
import {jsx} from "theme-ui"
import React from "react"
import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
import Link from "./link"
import Icon from "./icon"

const MenuItems = [
  {
    path: "/",
    title: "Home"
  },
  {
    path: "/about",
    title: "About"
  },
  {
    path: "/blog",
    title: "Blog"
  },
  {
    path: "/contact",
    title: "Contact"
  },
]

const ListLink = (props) => (
  <Link 
    to={props.to}
    sx={{
      mr: 3,
      color: "NavLink",
      textDecoration: "none",
      textTransform: "capitalize",
      "&:hover, &.active": {
        color: "NavLinkHover"
      }
    }}
  >
    {props.children}
  </Link>
)

class Navigation extends React.Component {
  constructor(props) {
    super(props)
    this.state = {showMenu: false}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
  handleToggleClick() {
    this.setState(state => ({      
      showMenu: !state.showMenu    
    }))
  }
  render () {
    const listMenuItems = MenuItems.map((menuItem, index) => 
      <ListLink key={index} to={menuItem.path}>{menuItem.title}</ListLink>
    )
    return (
      <nav 
        sx={{
          p: 3,
          position: "relative"
        }}
      >
        <button 
          onClick={this.handleToggleClick}
          className={"menu-trigger" + (this.state.showMenu ? " is-active" : "")}
          sx={{
            display: ["block", null, null, "none"],
            p: 0,
            fontSize: 4,
            background: "none",
            border: "none",
            color: "white",
            appearance:"none"
          }}
        >
          <Icon 
            sx={{
              display: "inline",
              ".is-active > &": {
                display: "none"
              }
            }}
          >
            <RiMenu3Line/>
          </Icon>
          <Icon 
            sx={{
              display: "none",
              ".is-active > &": {
                display: "inline"
              }
            }}
          >
            <RiCloseLine/>
          </Icon>
        </button>
        <div
          sx={{
            display: ["none", null, null, "block"],
            ".is-active + &": {
              display: "flex",
              flexDirection: "column",
              position: "absolute",
              right: 0,
              top: "100%",
              zIndex: 1,
              backgroundColor: "NavDropdownBg",
              maxWidth: "320px", 
              width: "320px", 
              borderRadius:" 0 0 0 12px",
              overflow: "hidden",
              "a": {
                p: 3,
                mr: 0,
                "&:hover": {
                  backgroundColor: "NavDropdownLinkHover",
                  color: "NavDropdownLinkHoverText"
                }
              }
            }
          }}
        >
          {listMenuItems}
        </div>
      </nav>
    )
  }
}

export default Navigation

[stackrole-dev]

This kind of looks ugly for me as my background is more from HTML and CSS/SCSS

[iampava]

Hey! Indeed looks a little messy. I think there's opportunity for some more cleanup if you also have a normal CSS stylesheet for native elements + if you use variants.

For example, I guess most of your buttons don't need the native background/border, so you could do something like this

button {
  border: none;
  background: none;
  appearance: none;
}

Same with <a>'s reagarding colors, active colors, etc.

Moving on to variants, try experimenting with those. I imagine you can use them for buttons, links, etc and you shouldn't need to write many sx props on the fly.

Finally, regarding the last div which is heavily styled, maybe it's worth replacing it with the Flex component from theme-ui. Could save you a few lines. Or even extracting it as a separate component together with it's children.

PS: I'm not an expert in theme-ui, just been playing with it for a couple of weeks so take what I said with a grain of salt. Still I highly highly recommend you experiment some more and see what works for you. Maybe re-writing this component in 2-3 ways :)

[stackrole-dev]

Thank you for the reply. I have restructured my component. It looks lot better.

/** @jsx jsx */
import { jsx } from "theme-ui"
import Menu from "../util/menu"
import NavLink from "./nav-link"
import MobileNavButton from "./mobile-nav-button"
import Navigation from "./navigation"

const NavLinks = Menu.map((item, index) => 
  <NavLink key={index} to={item.path}>{item.title}</NavLink>
)

export default props => (
  <nav 
    sx={{
      position: "relative",
      pr: 2,
      "a": {
        p: 3
      }
    }}
  >
    <MobileNavButton/>
    <Navigation>
      {NavLinks}
    </Navigation>
  </nav>
)

[stackrole-dev]

@iampava

I wondering if you have faced this issue before default style. As we are used styling with defult CSS elements. I kind require that to happen, it is possible to do with Theme UI.

Also am using .md instead .mdx. Along with gatsby-transformer-remark to query the data into templates. This seems to not apply style for the markdown content.

[iampava]

I've got zero experience with Gatsby or MDX so can't really help you there. Regarding your first point about default styles. Can you give some more details. Not sure I understand exactly the context/problem.

[jxnblk]

Theme UI won't add any styles to the global scope without you explicitly enabling them. Generally, you should style the elements you need styled directly, but you can use the BaseStyles component for non-MDX user generated content

[stackrole-dev]

Thank you @jxnblk, I would look into it

[lachlanjc]

Looks like this discussion wrapped up—@hasparus can you close?