
<Callout>

**This guide is a work in progress**. If you find any issues upgrading your site, create an issue on [GitHub](https://github.com/reflexjs/reflexjs/issues). We will help you.

</Callout>

## Changelog

### What's New

1. Reflexjs has been upgraded to work with React 17.0.0. This means we now have full support for the [new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html).
2. We also updated to Theme UI 0.6.0. This introduced some breaking changes (see below).
3. Variants are now callable.

```ts title=theme.ts
const theme = {
  button: {
    primary: {
      bg: "primary",
    },
    // highlight-start
    outline: (theme, styles) => {
      color: styles?.bg // This returns "primary" with button.primary.outline.
    },
    // highlight-end
  },
}

<button variant="button.primary.outline" />
```

### Breaking Changes

1. TypeScript: React components must now extend `React.HTMLAttributes<T>` for styles props.

```diff
- interface ButtonLinkProps {
+ interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  children?: React.ReactNode
}

export function ButtonLink({ children, ...props }) {
  return (
    <a variant="button.link" {...props}>
      {children}
    </a>
  )
}
```

2. Global styles (`styles.global`) replaced with `useRootStyles`.

```ts title=theme.ts
const theme = {
  useRootStyles: true, // highlight-line
  styles: {
    // Applies to <html />.
    root: {
      m: 0,
      p: 0,

      "*": {
        boxSizing: "border-box",
      },
    },
  },
}
```

<Callout>

`useRootStyles: true` applies `styles.root` to `html`.

`useRootStyles: false` applies `styles.root` to `body`.

</Callout>

### Deprecations

1. Components such as `Grid`, `Flex`, `Flexbox` and `Container` are now deprecated.
2. `reflexjs/babel` is deprecated and replaced by `@babel/preset-react`.

## Upgrade

To upgrade your site to Reflexjs:

1. Update `react`, `react-dom` and `reflexjs`.

```sh
yarn add react react-dom reflexjs
```

2. Update `.babelrc`.

If you're using **Next.js**, your `.babelrc` file should look like this:

```
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "reflexjs"
        }
      }
    ]
  ]
}
```

3. Edit your theme and move the styles under `styles.global` under `styles.root` and set `useRootStyles: true`. If you have styles under html, move it directly under `root`.

```ts title=theme.ts
const theme = {
  useRootStyles: true, // highlight-line
  styles: {
    // Applies to <html />.
    root: {
      m: 0,
      p: 0,

      "*": {
        boxSizing: "border-box",
      },

      body: {},
    },
  },
}
```


Upgrade Guide