search

AxaFrance / react-toolkit

Flexible components html + css + react using BEM convention. Maybe, you can call it "Design System" !
https://axafrance.github.io/design-system/
MIT License
97 stars 63 forks source link

Unable to use a component without importing global style #792

Open xballoy opened 4 years ago

xballoy commented 4 years ago

I used the Getting started to display a component without importing all the style of the toolkit.

This behavior can be reproduced on almost all components.

Expected

Screenshot 2020-11-03 at 16 56 08

Actual

Screenshot 2020-11-03 at 16 56 53

To make it work we need to add a dependency on react-toolkit-all, react-toolkit-core and import more CSS.

import '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.css';
import '@axa-fr/react-toolkit-core/dist/assets/fonts/icons/af-icons.css';

Source of the sample: https://codesandbox.io/s/blazing-cache-seesi

arnaudforaison commented 3 years ago

Component must have their own style ? Or need more documentation ? Because Design System explain these 2 css imports.

xballoy commented 3 years ago

I would say that components must have their own style because currently you must have a dependency on your component, core and all to make it work. But we could just update the documentation in the readme to start.