How to add a className to an EasyUI react component

114 Views Asked by At

I would simply like to add some styling to the DateBox react component defined as in the code below

Let's say I'd like to change the width of the panel, something like:

<DateBox className="myClassName"></DateBox>

but this did not work. My actual component is:

import React from "react";
import { DateBox } from 'rc-easyui';
import "./style.css"   

class DatePick extends React.Component {
  constructor() {
    super();
  }    
  render() {
    return (
      <div>
        <DateBox>
        </DateBox>
      </div>
    );
  }
}    
export default DatePick;

How can I specify the DateBox component styling className (not the div in which is contained), assuming myClassName is defined in style.css?

Thank you for any suggestions!

EDIT: let me be more specific using an example. Suppose I would like to change the background color of the above EasyUI react component: how to achieve that in the code I'm using?

Thank you again!

1

There are 1 best solutions below

1
silencedogood On

If you apply a className to a component, it looks at it as a prop. So, you'll need to apply the className to an actual html markup tag within the DateBox component.

Or, you could apply the style to the parent div that the component resides in, which may or may not suit your needs.

According to the docs, you could also apply a style tag (prop), like so:

<DateBox style='some class or inline style'>