Button Styling

[All Vision]

I was wondering how I could style a button that is placed inside a JSXGraph.board

Docs say that you can create a button using board.create('button', ....). However, there is no styling attributes for the button itself (although there exists styling for the Text inside the button)

My second approach was to use  board.create('text'' ....), and place a html string inside one of its arguments to create a button (i.e. '<button style="..." onclick="....">hihihi</button>)

However, with this approach, my onClick handler is not being called since I am using JSXGraph with React.

export class MyGraph extends Component<GraphProps, any> {

    buttonHandler (): void {

        ....

    }

    render(){

       .....

    }

}

When I use the html button string '<button onclick="this.buttonHandler()> test </button>'

I get the following error

 this.buttonHandler is not a function

    at HTMLButtonElement.onclick

Ideally I would like to use a Button Component from the Material UI library, but I haven't found any clear way to do so, so I'm trying to find a work around.

My first method allows me to use a buttonClickHandler created in my React Class Component, but with no styling, and the second method allows me to put styling on my button , but with no working onclick handler.

What is the best way to get the best of both worlds?

Any help is appreciated and thank you so much for reading this all the way through.

[Alfred Wassermann]

if you create a JSXGraph button with

    var btn = board.create('button', ...);

then you can access the HTML button node with

    btn.rendNodeButton

and add a CSS class or manipulate the style.

Another option would be to use a CSS selector like the following:

    div.jxgbox >button { ... }

For the second approach, I'm not sure, but you probably need to call

    myGraph.buttonHandler ()

in case myGraph is an object of class MyGraph.

Best wishes,

Alfred