kuruption213 kuruption213 - 29 days ago 9
React JSX Question

Override Classname Not Working in React Component

I'm trying to do a seemingly easy thing but without much luck. I have a React app that uses the Grommet UX framework. In the app, I use a Web Chat component which I would like to style.

The grommet style is correctly being applied for fonts but my custom changes for my web chat component are not being applied.

Any help would be very much appreciated.

App.js

import '../scss/custom.scss';
...
class PatientApp extends React.Component {
...
render() {
...
<Chat className='wc-app' directline='GUID_Entered_Here />


Custom.scss

@import 'elu.defaults.scss';
@import '~grommet/scss/grommet-core/index.scss';

body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
background-color: #2AD2C9;
}

.wc-chatview-panel {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}

.wc-header {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}

.wc-message-pane {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
font-style: #2AD2C9;
}


Below is a screenshot which shows the output HTML when i run my code. On the right you will notice the classNames being referenced.

enter image description here

Answer Source

All, I was able to get this working just had to set a height and width within the chatview panel and everything is now appearing correctly.