Blending Grommet Theme with a touch of Custom CSS for Component Styling

I've been working on a React site that incorporates Grommet as the UX framework along with an embedded chat control. While everything is functional, the layout leaves much to be desired (see second image below). In the provided link, you can see that the chat box is positioned on the left side, which deviates significantly from its native form (shown in the first screenshot below). The spacing difference between the two is quite noticeable. I want to maintain the Grommet theme for text styling but also aim to keep the spacing and other design elements consistent with the native chat control.

To address this issue, I created a custom style in Grommet hoping to apply my own settings to the chat control while accommodating the Grommet overrides. I imported my default SCSS file with custom colors before calling the Grommet core index.scss file. Then, I included the necessary styles for the web chat control into my custom.scss file. The code snippet for custom.scss is provided below.

So, what's the best approach to set up my code to have better control over the appearance and layout of the chat control while still retaining some of the overriding Grommet styles such as fonts and colors?

Custom.scss

@import 'elu.defaults.scss';
@import '~grommet/scss/grommet-core/index.scss';
@import "includes/colors";
@import "includes/settings";
@import "includes/card-size";

/* Updated version - Original placed in zzz_archive */

chatstyle {

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

    /* Other WC app styles go here */
    
};

App.js...

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'grommet/components/App';
import Article from 'grommet/components/Article';
import Section from 'grommet/components/Section';
import Split from 'grommet/components/Split';
import Box from 'grommet/components/Box';
import {Chat} from 'botframework-webchat';
import '../scss/custom.scss';

class PatientApp extends React.Component {
...
render() {
return (
<App centered={false}>
<Article>
<Split flex='right'>
<Section>
<Box margin='none' pad='none'>
<Chat style={'chatstyle'} directLine={{secret: 'My GUID'}} user={{id:'jesse', name: 'jesse'}}/>
</Box>
...

Desired appearance of the chat component with Grommet styling https://i.sstatic.net/JCzTF.png

Current appearance of the Chat Control

Answer №1

Hey everyone, I managed to solve this issue by defining a width and height within the style of .wc-chatview-panel, which has now resulted in the correct button alignment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Newbie problem with css - Struggling to position link in top right corner

I want to have a link appear on the top right corner that opens a new tab with another page. Although the tab and page open correctly, the link remains stuck in the top left corner. Despite trying various solutions from Stackoverflow, nothing seems to be ...

Having trouble getting into my own Hook with Next.js to access the localStorage

My goal is to create a hook that can store User credentials such as authToken. I attempted to save the user data to localStorage by creating a custom hook for this purpose. Unfortunately, when compiling my code, I encountered an error stating that window i ...

The ReactJS input box is stubbornly rejecting all input

Struggling with this code and can't seem to figure out why the input lines aren't accepting anything. After searching extensively, I decided it was time to ask for help. P.S. I am new to react class App extends React.Component { state = { inp ...

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

Detecting planes using react-three/xr technology

I am utilizing react-three/xr and react-three/drei within my next.js project. This piece of code positions the 3D model in a fixed location. const TestComponent: NextPage = () => { return ( <div className="testar"> <ARCanv ...

Instructions for utilizing img.shape() in Javascript

import cv2 open image file img = cv2.imread('/home/img/python.png', cv2.IMREAD_UNCHANGED) fetch image dimensions dimensions = img.shape image details height = img.shape[0] width = img.shape[1] channels = img.shape[2] print('Image Dimensi ...

Having difficulty moving events within FullCalendar

In my FullCalendar application using React and the Resource-Timeline builder by webpack, I am experiencing two peculiar issues that may be connected. One problem is that I cannot drag events. Strangely enough, this issue only occurs in my current project; ...

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

Tips for choosing checkboxes that have a opacity of 0.5

Is there a way to target checkboxes with an opacity of 0.5? The selector :checkbox[style~='opacity: 0.5'] seems to be ineffective in selecting them. ...

React Hooks: Issue with UseRef not detecting events from Material UI Select component

I'm currently utilizing React Hooks in my project. I am attempting to trigger an onclick event using the useRef hook. const component1: React.FC<Props> = props { const node =useRef<HTMLDivElement>(null); const ClickListe ...

Display the Bootstrap dropdown menu on the right-hand side

I am currently working on a dropdown menu and I would like the dropdown items to be displayed on the right side. The functionality is working, but there seems to be an issue where the dropdown menu is not fully visible. The dropdown menu is located within ...

Tips for aligning a select and select box when the position of the select has been modified

Recently, I encountered an interesting issue with the default html select element. When you click on the select, its position changes, but the box below it fails to adjust its position accordingly. https://i.stack.imgur.com/SwL3Q.gif Below is a basic cod ...

What is the best way to transfer a JSX element from a child component to its parent component?

Is it acceptable to send the JSX element from a parent component to a child component through props? From my understanding, using `useState` to store JSX elements is not recommended. Therefore, I can't just pass a callback down to the child and then ...

Adding an arrow between two divs in html and css

I am looking to add an arrow between two divs. Here is an example image for reference: https://i.sstatic.net/Sl5A8.png This is my current setup: <style> .link{ font-size: 14px; margin-bottom: 10px; } ...

The mysterious disappearance of storybook actions from the log

I'm having an issue with my React component in Storybook. When I click the button, nothing is being logged to the action panel. What could be causing this problem? The scenarios... // Button.stories.js import React from 'react' import Butto ...

Guide: Transform Bootstrap 4 Inline Checkboxes into Stacked Format When Screen Size Is Altered

The new layout of checkboxes and radio buttons in Bootstrap 4 really caught my attention. However, I am looking for a way to switch between "stack" and "inline" based on the screen size. Although size tagging has been added for various elements, I haven&ap ...

Bootstrap 4 alpha 6 seems to be ignoring the custom.scss file that I have created

I'm currently in the process of learning Bootstrap 4 (alpha 6) through a tutorial. One of the tasks I need to complete is customizing the original css configuration from Bootstrap. To do this, I made some changes to the _custom.scss file: // Bootstr ...

Tips for retrieving the value of an input field using Material-UI

Currently, I am implementing Material-UI within a React project. render(){return ( <input type="range" min="0" max="100" value="100" onChange={this.handleMasterVolume} class="master-gain form-control ...

``The `npm ci` command is designed to install packages only when there is synchronization between your package.json and package-lock.json or npm-shrinkwrap.json files

I'm encountering an issue with my react app when the GitHub actions are running as CI for builds. npm ERR! npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file ...

Animating divs one by one using CSS3 with delays

I am experimenting with animating three separate divs one by one, each moving down 50px as a test. Here is the SCSS code I am using: .action { margin: 20px 0; text-align: center; transform: translate(0,0); transition: ...