CSS Injection

If you need to change the style of a component in one specific case, then you should use local customization of styles.

Step one ​

Install our component and our plugin @semcore/babel-plugin-styles to properly transpile the code.

npm i intergalactic @semcore/babel-plugin-styles

npm i intergalactic @semcore/babel-plugin-styles

Step two ​

Add a new rule to your webpack-config :

    {
        test: /\.js$/,
        include: /\/node_modules\/@semcore\//,
        enforce: 'pre',
        use: [{
            loader: 'babel-loader',
            options: {
                plugins: [
                    ['@semcore/babel-plugin-styles']
                ],
            },
        }, ]
    }

    {
        test: /\.js$/,
        include: /\/node_modules\/@semcore\//,
        enforce: 'pre',
        use: [{
            loader: 'babel-loader',
            options: {
                plugins: [
                    ['@semcore/babel-plugin-styles']
                ],
            },
        }, ]
    }

Step three ​

Write your own styles for our components using one of the following methods:

• CSS-in-JS

import { sstyled } from 'intergalactic/core';
const styles = sstyled.css`
  SWhatever {
    some-styles: 'Cool';
  }
`;

import { sstyled } from 'intergalactic/core';
const styles = sstyled.css`
  SWhatever {
    some-styles: 'Cool';
  }
`;

• good old CSS

import styles from './custom.shadow.css';

import styles from './custom.shadow.css';

Step four ​

Pass the new styles to the styles property of our component:

import Button from 'intergalactic/Button';
export default (props) => <Button styles={styles} {...props} />;

import Button from 'intergalactic/Button';
export default (props) => <Button styles={styles} {...props} />;

👯‍ Congratulations, you've changed the styles of the component!

Note ​

Rules for writing styles

Look at the source of styles in GitHub, styles are written in the same format.

• By convention, all of our styled tags are capitalized S + ComponentName. You don’t need to write styles with the .button classes, just use the tag names SButton.
• If you need to access the properties of a component, then use SButton[keybordFocus] or properties with the value SButton[size="m"].
• If you need properties like :hover and others, then they are available as usual SButton:hover.

You can use variables as properties:

import { sstyled } from 'intergalactic/core';
import Button from 'intergalactic/button';

const styles = sstyled.css`
  SButton {
    background: var(--myCustomProp);
  }
`;

const Demo = () => <Button styles={styles} myCustomProp="red" />;

import { sstyled } from 'intergalactic/core';
import Button from 'intergalactic/button';

const styles = sstyled.css`
  SButton {
    background: var(--myCustomProp);
  }
`;

const Demo = () => <Button styles={styles} myCustomProp="red" />;