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 @semcore/ui @semcore/babel-plugin-styles

npm i @semcore/ui @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 '@semcore/ui/core';
const styles = sstyled.css`
  SWhatever {
    some-styles: 'Cool';
  }
`;

import { sstyled } from '@semcore/ui/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 '@semcore/ui/Button';
export default (props) => <Button styles={styles} {...props} />;

import Button from '@semcore/ui/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 '@semcore/ui/core';
import Button from '@semcore/ui/button';

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

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

import { sstyled } from '@semcore/ui/core';
import Button from '@semcore/ui/button';

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

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