Unable to make themes work

[EmanueleCiriachi]

I can't understand what I'm doing wrong - I followed religiously everything that the documentation told me to do.

EDIT: this is a codesandbox:
https://codesandbox.io/s/carbon-charts-react-elkjs-diagram-forked-hqxtj0?file=/src/App.js

My App.scss is as follows:

@import '@carbon/themes/scss/themes';

// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
@include carbon--theme();

@import 'carbon-components/css/carbon-components.min.css';

My App.tsx is as follows:

import React from 'react';
import './App.scss';
import { Accordion, AccordionItem, Button, Column, DataTable, DatePicker, DatePickerInput, Dropdown, Grid, Row, Table, TableBody, TableCell, TableContainer, TableHead, TableHeader, TableRow, Tile } from 'carbon-components-react';

function App() {
  return (
    <!-- various Carbon Controls, some of which I copied here -->
            <Column>
              <Button>Button</Button>
            </Column>
            <Column>
              <Button kind="secondary">Secondary button</Button>
            </Column>
            <Column>
              <Button kind="tertiary">Tertiary Button</Button>
            </Column>
  )
}

export default App;

And yet I don't see any difference - I tried with every one of the four themes.

What am I doing wrong?

[tay1orjones]

Hey @EmanueleCiriachi, I think you'll need to use the sass entry point instead of the minified css:

@import '@carbon/themes/scss/themes';

// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
@include carbon--theme();

- @import 'carbon-components/css/carbon-components.min.css';
+ @import 'carbon-components/scss/globals/scss/styles.scss';

The React tutorial is a good reference for some things like this. Hope it helps!