Rebass не принимает значения, определенные в теме пользовательского интерфейса Theme

Question

Мой индексный файл, в который я оборачиваю компонент приложения с помощью ThemeProvider

Индекс.tsx

      import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'theme-ui';
import App from './App';
import {theme}  from './theme';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Я определяю свою тему

тема.ts

      import { Theme } from "theme-ui";

export const theme : Theme = {
  colors: {
    primary:"green"
  }
}

Вот мой компонент приложения, в котором я создаю компонент кнопки Rebass.

App.tsx

      import React from "react";
import { Button } from "rebass";

function App() {
  return (
    <Button color="primary">hello</Button>
  );
}

export default App;

Кнопка не выбирает основной цвет, определенный в моей теме. Кто-нибудь знает, почему?