Stylization

To style a DoksJS component, you need to create a CSS file that is named styles.module.css and import it into your component. For example, the following code creates a CSS file that styles a button:

.button {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}

This CSS file defines a CSS class called .button. The .button class styles the button with a black background color, white text, and 10px of padding.

To import the CSS file into your component, you need to use the import keyword. For example, the following code imports the styles.module.css file into a component called Button:

import React, { Component } from 'react';
import './styles.module.css';

class Button extends Component {
  render() {
    return (
      <button className="button">Click me!</button>
    );
  }
}

export default Button;

This code imports the styles.module.css file and assigns the .button CSS class to the button component.

You can also use the style prop to style a DoksJS component. The style prop is an object that can be used to set the CSS properties of the component. For example, the following code styles a button with the style prop:

import React, { Component } from 'react';

class Button extends Component {
  render() {
    return (
      <button style={{ background: 'red', color: 'white' }}>Click me!</button>
    );
  }
}

export default Button;