We Keep Coding

Icon on hover in ChakraUI Button component custom theme

I am currently building a component library for a project following given design specifications and therefore am extending the default button theme in a separate button.ts which contains something like this:
const solid: SystemStyleFunction = (props) => ({
bg: mode("tealLight", "teal")(props),
color: "bgDark",
borderRadius: "20px",
_active: {
bg: mode("white", "bgDark")(props),
color: mode("bgDark", "white")(props)
},
_disabled: {
bg: "lightGrey",
color: "grey"
}
});
const Button : StyleConfig = {
defaultProps: {
size: "md"
},
variants: {
solid: solid,
}
};
export default Button;
Works like a charm so far.
Now the given design requires that an arrow is to be shown on hover to the right of the button's label.
Back in the days of hand-written (S)CSS, i would have just added a pseudo-element only visible on :hover – here, of course, i am now looking into adding _hover: { ... } to the above SystemStyleFunction-config.
According to the Chakra UI docs, showing an icon on a standard form button can easily be achieved via the rightIcon or leftIcon prop. I do have the icon component ready at hand, however:
The leftIcon and rightIcon prop values should be react elements NOT strings.
So how can the hover-only icon be achieved then ...
can i use React.createElement(...) to define the element right there (or in the StyleConfig object at the end of my file)?
can i convert my button.ts into a button.tsx and then add the icon-element in JSX-style syntax?
is there an alternative way of setting the icon element (because the documentation says "should", not "must")
or is this impossible to be done with my styled <Button> and a completely different approach is needed (if so, kindly advise)?

I did this way :
<InputGroup
alignItems="center"
bgColor="#e27065"
w={200}
borderRadius="3"
_hover={{ bg: "white", svg: { fill: "black" } }}
>
<InputLeftElement
children={<BsSearch color="white" />}
height={8}
boxSize={7}
alignItems="center"
padding={1}
/>
<Input
type="text"
placeholder="Search"
_placeholder={{ color: "white" }}
_hover={{ _placeholder: { color: "black" } }}
height={7}
borderRadius="3"
/>
</InputGroup>

Using material ui and React, change the style of the `carrot` in TextField

I'm using MUI textfield per the documentation here: https://mui.com/components/text-fields/. while there are plenty of docs on changing the font of the input text, I have yet to see any docs or resources on how to make the carrot fatter. I'm looking for a style that simulates the console, and I have provided an image below. Below is the code for textinput I'm using, rather standard:
const translucent = 'rgba(255,255,255,0.1)';
const useStyles = makeStyles((theme: Theme) => createStyles({
wrapForm : {
display: "flex",
justifyContent: "center",
width: "95%",
margin: `${theme.spacing(0)} auto`,
// borderBottom: `0.8px solid ${translucent}`, // #TODO: remove this
},
wrapText : {
width: "100%"
},
button: {
margin: theme.spacing(1),
},
multilineColor:{
color:'white',
borderColor: `white !important`,
filter: 'blur(0.8px)'
},
overLayContainer: {
display: 'grid',
},
overLayContainerInner: {
gridArea: '1 / 1',
},
}));
/******************************************************
#View
******************************************************/
export const TextInput = (props) => {
const classes = useStyles();
return (
<>
<form className={classes.wrapForm} noValidate autoComplete="off">
<TextField
className = {classes.wrapForm}
fullWidth
multiline
InputProps={{className: classes.multilineColor, disableUnderline: true}}
rows = "1"
margin = "normal"
/>
</form>
</>
)
}

The reason that there's no documentation on how to make a fatter "caret" is because this is not currently supported in browsers. You can change the caret color using CSS (eg. caret-color: red;), but if you want to mimic a console's "fat" caret, you may have to add your own element to the screen and then move it based on the input entered. Here is an old example of one way to do it and another which would also require your own JS implementation.
There is a proposed revision for caret-shape: block;, which appears to be what you're looking for, but that is not currently supported.

Add custom style inside DataGrid Toolbar's popup component Material-UI

I'm creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI.
Here is the official example for the Grid Toolbar components:
If we click one of the Grid Toolbar components, it will show a popup/popper as seen in the screenshot below.
What I want to do is to change all font sizes inside every popup/popper from each Grid Toolbar component.
I try to change one text for example.
As we can see from the screenshot below, if we inspect the text then change the font-size and color properties directly, it would change.
But if I grab and copy the selector (in this case is .MuiTypography-body1), then I paste it in my code, there nothing changes (the font-size and color properties don't change).
Here is the simple code:
const CustomGridToolbarColumns = withStyles((theme) => ({
root: {
color: "dodgerblue",
"& .MuiTypography-body1": {
fontSize: 20,
color: "red"
}
}
}))(GridToolbarColumnsButton);
I also want to change all font-size and color properties inside each popup/popper of each Grid Toolbar component.
I inspect the popup/popper then change the font-size and color properties but still don't work as seen in the screenshot below.
Here are the dependencies (in package.json file):
"#material-ui/core": "^4.12.3",
"#material-ui/styles": "^4.11.4",
"#mui/x-data-grid-pro": "^4.0.0",
Here is the full code: https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj
So my questions are:
how can we change some properties inside the popup/popper of every Grid Toolbar component?
how can we change all properties inside the popup/popper of every Grid Toolbar component?

You can inspect the element and see that the component you need to apply the style to is called GridPanel. This is the wrapper component of the filters and columns panel. See all the component slots here for reference.
V5
<DataGrid
{...data}
components={{
Toolbar: GridToolbar,
}}
componentsProps={{
panel: {
sx: {
'& .MuiTypography-root': {
color: 'dodgerblue',
fontSize: 20,
},
'& .MuiDataGrid-filterForm': {
bgcolor: 'lightblue',
},
},
},
}}
/>
In order to change the styles of the other 2 GridMenus (density/export), you need to target the MuiDataGrid-menuList class name. Currently I see there is no other way around using global styles because DataGrid does not allow you to customize the GridMenu component:
<GlobalStyles
styles={{
'.MuiDataGrid-menuList': {
backgroundColor: 'pink',
'& .MuiMenuItem-root': {
fontSize: 26,
},
},
}}
/>
V4
import { DataGrid, GridToolbar, GridPanel } from "#mui/x-data-grid";
const useStyles = makeStyles({
panel: {
'& .MuiTypography-root': {
color: 'dodgerblue',
fontSize: 20,
},
},
});
<DataGrid
{...data}
components={{
Toolbar: GridToolbar,
}}
componentsProps={{
// GridPanel
panel: { className: classes.panel },
}}
/>
<GlobalStyles
styles={{
".MuiDataGrid-gridMenuList": {
backgroundColor: "pink",
"& .MuiMenuItem-root": {
fontSize: 26
}
}
}}
/>

How to Style specific/single Item or a Component using Custom Css in React Js?

I have been trying to style the search bar which is the TextFiled component used from react Material Ui library. However, I tried to do using External and Inline CSS but no results.
I tried to do using Withstyle, it does work but it is also affecting other TextFiled on another components. The issue is how can only target one specific item?
The real Search bar/TextFiled image is below in black border by default I want to make it white.
The code I tried:
const TextFiledStyle = withStyles({
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: '#356E44',
},
'&.Mui-focused fieldset': {
borderColor: 'gray',
},
},
},
})(TextField);
Any Help or suggestions would be really appriciated.

I think you should just be able to add a class name to the component as you use it.
<TextField className="custom-class">some text</TextField>
Then just adjust the css as you need. e.g.
.custom-class .MuiOutlinedInput-root fieldset {
borderColor: white;
}
See more in the docs.
https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names

Thanks for the help I have to twist around a little bit but found the answer which is as below:
const useStyles = makeStyles (theme => ({
textbox:{
'& .MuiOutlinedInput-root': {
color: 'white',
border: '1px solid white'
}
},
}))

antD model API - Background colour change

Is there a way to change the antD model body color using styles API? As per the documentation, model attributes can be changed using the styles attribute but the below code is changing only the footer background color.Any help would be really appreciated.
import { notification, Modal, Form, AutoComplete } from 'antd';
<Modal
mask={false}
title="Select Delivery Location"
style={{
top: 150,
// borderColor: '#00FF00', //changing the footer colour only
// backgroundColor: '#FF0000', //not working
}}
width={350}
onOk={this.handleOnModelSubmit}
visible={this.state.modal1Visible}
onCancel={() => this.setModal1Visible(false)}>
</Modal>

<Modal
bodyStyle={{
backgroundColor: 'red'
}}
/>
Either using 1 bracket '{' or 2 '{{'