How to change button color in smartclient?

Question

I have searched for this and found this topic but it does not have enought details:

https://forums.smartclient.com/forum/smart-gwt-technical-q-a/18078-can-not-change-button-background-color

So i think you need to create your own style, or modify the existing ones

How to create new style? How to add it? How to find existing ones? There are many css and some pcss files in my project but I do not get which ones are used by smartclient.

I am adding buttons this way:

<VLayout>
                            <HTMLFlow contents={`<span style="font-weight: bold">Actions</span><br>`}/>
                            <HTMLFlow contents={`<style></style>`}/>
                            <LayoutSpacer/>
                            {this.addNewButton = <Button title={translation.button.addNew}/>}
                            <LayoutSpacer/>
                            {this.deleteButton = <Button title={translation.button.remove} visibility={'hidden'}/>}
                        </VLayout>

By PhpStorm autocompletion I find there is backgroundColor property: {this.deleteButton = <Button title={translation.button.remove} visibility={'hidden'} backgroundColor={red}/>}

But setting red this way does not work.

I have provided one answer, but it just changes background color. Need to know how to set not only background but text color, border color. Might be that I need baseStyle property but I do not see examples how to use it.

Update

I have another example where my provided answer does not work.

this._buttonSearch = <Button title={translation.button.search} width={70} autoFit baseStyle={"btn-secondary button"}/>;
            this._buttonReset = <Button title={translation.button.reset} width={70} autoFit baseStyle={"btn-secondary button"}/>;
            this._monthlyViewButton = <Button title={translation.button.monthly_view} width={80} autoFit baseStyle={"btn-secondary button view-btn"}/>;
            // this._monthlyViewButton2 = <Button title={'montly 2'} width={80} autoFit baseStyle={"btn-secondary button view-btn"}/>;
            this._weeklyViewButton = <Button title={translation.button.weekly_view} width={80} autoFit baseStyle={"btn-secondary button view-btn"}/>;
            this._dailyViewButton = <Button title={translation.button.daily_view} width={80} autoFit baseStyle={"btn-secondary button active-view-btn"}/>;
            this._previousDayButton = <Button title={translation.button.previous_day} width={102} autoFit baseStyle={"btn-secondary button"}/>;
            this._nextDayButton = <Button title={translation.button.next_day} width={77} autoFit baseStyle={"btn-secondary button"}/>;
            this._skipCheckButton = <Button title={translation.button.skip_check} width={77} autoFit baseStyle={"btn-secondary button view-btn"} backgroundColor={'white'}/>;
            this._showHideUnassigned = <Button title={translation.button.hide_unassigned} prompt={translation.button.hide_unassigned} width={120} autoFit baseStyle={"btn-secondary button"}/>;
            this._shiftViewButton = <Button title={translation.button.shift_view} width={80} autoFit baseStyle={"btn-secondary button view-btn"}/>;


            this._dynamicForm =
                <DynamicForm dataSource={page.schedules.ds.EmployeesDataSource.sc()}
                        useAllDataSourceFields={false}
                             numCols={12}
                             colWidths={["12%", "13%", "1%", "12%", "1%", "38%", "1%", "1%", "1%", "19%", "1%", "1%"]}>
                    <FormFieldItem name={"text"} showTitle={false} showHintInField={true} hint={translation.schedules.text}/>
                    <FormFieldItem name={"departments"} editorType={"ComboBoxItem"} showTitle={false} showHintInField={true} hint={translation.schedules.department}/>
                    <FormFieldItem name={"from"} title={translation.title.day} type={"date"} width={130} useTextField={true}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._buttonSearch} showTitle={false}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._buttonReset} showTitle={false}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._dailyViewButton} showTitle={false}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._weeklyViewButton} showTitle={false}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._skipCheckButton} showTitle={false}/>
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._monthlyViewButton} showTitle={false}/
                    <FormFieldItem name="" editorType="CanvasItem" createCanvas={() => this._shiftViewButton} showTitle={false}/>
                    <FormFieldItem name="previousDayButton" editorType="CanvasItem" createCanvas={() => this._previousDayButton} showTitle={false}/>
                    <FormFieldItem name="nextDayButton" editorType="CanvasItem" createCanvas={() => this._nextDayButton} showTitle={false}/>

                </DynamicForm>;

So there is _skipCheckButton. It should be white as _weeklyViewButton - code looks same. But for some reason it is blue. What can be causing it to be blue?

Answer 1

While writing question and testing, I noticed that on the error I could click PhpStorm suggestion, and it created private variable red.

Then I set 'red' string to the red. And used this.red to backgroundColor property and it worked.

And then tried this way and it worked - needed to put in quotes:

{this.deleteButton = <Button title={translation.button.remove} visibility={'hidden'} backgroundColor={'red'}/>}

And about the updated part where shows blue button instead of white - the answer is - check if you are testing the right place. In my case - when clicking "Monthly" button it has probably to show blue skip check because I added just random button earlier for testing. But when clicking "Daily" button, then it had to show white button. I was testing wrong place.