Customizing Calcite React

Extending Components

You can extend Calcite React components using the syntax provided by Styled Components. CSS properties will override the defaults on the Calcite React component.

xxxxxxxxxx

import styled, { css } from 'styled-components';

​

import Button from 'calcite-react/Button';

​

const ExtendedButton = styled(Button)`

  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),

    0px 5px 8px 0px rgba(0, 0, 0, 0.14),

    0px 1px 14px 0px rgba(0, 0, 0, 0.12);

`;

​

const App = () => {

  return <ExtendedButton>My Custom Button</ExtendedButton>;

};

​

export default App;

Using Theme Variables

As part of extending Calcite React components, you also gain access to the full Theme Object. This includes colors, baseline measurements, border-radius, etc.

xxxxxxxxxx

const ExtendedButton = styled(Button)`

  color: ${props => props.theme.palette.offWhite};

`;

Custom Props

You can also conditionally add styles based on props you pass into your new custom component.

xxxxxxxxxx

import styled, { css } from 'styled-components';

​

const ExtendedButton = styled(Button)`

  ${props => props.active && css`

      background: #1d5d8c;

      color: white;

    `;

  };

`;

​

const App = () => {

  return <ExtendedButton active >My Custom Button</ExtendedButton>;

};

​

export default App;

as Polymorphic Property

If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the as prop to do this at runtime.

xxxxxxxxxx

const Component = styled.div`

  color: red;

`;

​

render(

  <Component

    as="button"

    onClick={() => alert('It works!')}

  >

    Hello World!

  </Component>

)

Customizing the Theme

Limited theming is possible with Calcite React by extending the Theme Object before passing it into the <CalciteThemeProvider />. Support for more robust theming is on our roadmap.

xxxxxxxxxx

import React from 'react';

import ReactDOM from 'react-dom';

​

import CalciteThemeProvider, {

  CalciteTheme

} from 'calcite-react/CalciteThemeProvider';

​

import App from 'path/to/App';

​

const CustomTheme = {

  ...CalciteTheme,

  palette: {

    ...CalciteTheme.palette,

    blue: '#1E5D8C'

  }

};

​

ReactDOM.render(

  <CalciteThemeProvider theme={CustomTheme}>

    <App />

  </CalciteThemeProvider>,

  document.getElementById('root')

);