React Big Calendar Styling

Question

My problem is that I can't style the big calendar navigation bar button, and I don't know where can I find the documentation or style command of this package.

I tried to search for the solution in Google, but most people don't style their button and leave it as default. Moreover, I also use chatGPT to help me style. It gave me rbc-button and .rbc-toolbar .rbc-btn-group button.rbc-btn class to style, but both didn't change anything.

Example

.rbc-toolbar .rbc-btn-group button.rbc-btn {
  background-color: #007bff;
}

and

.rbc-btn {
  background-color: #007bff !important;
}

Answer 1

DevTools can help you here.

.rbc-toolbar {
  .rbc-button-group {
    button {
      background-color: #007bff;
    }
  }
}

You can also create your own custom Toolbar. There are examples of this in the documentation of Big Calendar.