How to change these default 0 to some other value(I am using this ToggleButton component )
.css-1gjgmky-MuiToggleButtonGroup-root .MuiToggleButtonGroup-grouped:not(:last-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
I have tried
const StyledToggleButton = styled(ToggleButton)({
borderBottomRightRadius: 4,
borderTopRightRadius: 4,
});
But this failed
re your question's particular answer you can try following way.
const StyledToggleButton = styled(ToggleButton)({
'&.MuiToggleButtonGroup-grouped:not(:last-of-type)':{
borderRadius: '4px !important',
},
});
But my preferred way to display toggle buttons is below,
<ToggleButton
sx={{
"&.MuiToggleButtonGroup-grouped": {
borderRadius: "4px !important",
mx: 1,
border: "1px solid lightgrey !important"
}
}}
>
...
</ToggleButton>
In your node module package go to the #mui then material then tooglebuttongroup folder then you'll find ToggleButtonGroup.js file there you'll find the default settings you can change as per your desire. enter image description here
Related
On the website for Tailwind CSS there is a video of someone editing in vscode.
How did they get the popup to look like that? Can I reproduce it some how?
For those wanting to see the gif on their website: https://tailwindcss.com/docs/editor-setup
You are looking at the result of someone's chosen color theme in their vscode editor. You could contact them and ask for the name of that theme and whether it is available on the VSCode Marketplace or you can make your own.
Specifically for the Suggest Widget you showed in your question:
You can do this in vscode's own settings. In your settings.json
{
"workbench.colorCustomizations": {
"editorSuggestWidget.background": "#344255",
// the first line in your gif is selected
"editorSuggestWidget.selectedBackground": "#485669",
// the letters you have typed to bring up intellisense: 'bg' in your example
"editorSuggestWidget.highlightForeground": "#97f4e2",
// 'bg' in a selected entry
"editorSuggestWidget.focusHighlightForeground": "#97f4e2",
"editorSuggestWidget.foreground": "#fff" // the text color
}
}
The workbench.colorCustomizations object allows you to change the color of many of vscode UI elements. To learn more about this see
Customizing a Color Theme:
You can use IntelliSense while setting workbench.colorCustomizations
values or, for a list of all customizable colors, see the Theme Color
Reference.
So, for instance if you know that is the suggestWidget, just typing "suggestWidget" (including the quotes) inside a workbench.colorCustomizations object should give you all the properties of a suggestWidget of which you can change the color.
Thet are also listed here: Theme Color Reference: Editor Widget Colors.
[I used an eyedropper browser extension to get the colors for the various elements.]
[I assume the rounded corners are a result of MacOS, the demo below is with W11.]
It says in their guide here.
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:
Add these settings.json
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
Save and restart VS code.
When you want to use tailwind related classes use eg. "text-" you should see the suggestions.
You have to use vscode-custom-css extension
Install the extension and try the CSS below...
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
padding-top: 15px
}
you can use Tailwind Moon theme to get similar colors also...
Use this extension: vscode-custom-css and this css:
.colorspan {
border-radius: 4px;
}
.monaco-editor .ced-1-TextEditorDecorationType24-3::before {
border-radius: 4px;
}
.monaco-editor .suggest-widget {
border-radius: 15px 15px 15px 15px;
box-shadow: 0 0 15px 15px rgba(0, 0, 0, 0.1);
background-color: #344254 !important;
padding: 10px;
}
.monaco-editor .monaco-highlighted-label .highlight {
color: #79bcb6;
}
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
background-color: #485668 !important;
}
.monaco-editor .monaco-list-row:hover:not(.selected):not(.focused) {
background-color: #485668 !important;
}
using Material UI V5 and i can't change the border color of my TextField with the sx prop.
Changing the color of the label and input works fine, but not with border color.
<TextField
sx={{
input: { color: 'white' } ,
label: {color: 'white'},
borderColor: 'white',
border: {color: 'white'},
}}
Any ideas?
The TextField is a weird one, the border is actually defined on the fieldset element. The following should style that.
<TextField
sx={{
fieldset: { borderColor: "red" }
}}
Here is a screen capture of the TextField HTML to help show the fieldset element I'm talking about.
For changing the border color, you can change borderBottom color inside input:
<TextField sx={{
input: {
color: "#ffffff",
borderBottom: "1px solid #ffffff",
},
}}/>
As you can see in this codesandbox, I have used the 'transform' property, based on this answer, also tried changing the font-size on the StepIconProps (commented out code on CSB).
The first option results in the circle resizing while still retaining its centre, and hence its alignment with the line, but the text stays in the same place.
The second option means the circle loses its alignment with the line, but the text stays nicely positioned relative to the circle.
I'm not sure either are entirely the correct way to do it. There is an example in the docs where the icon has been customised, but this involves an implementation a whole new icon, which I'd rather avoid. I am happy with all of the default appearance, with the only exception being the size.
I created a div element using styled components and I passed it as a prop icon at StepLabel from material UI.
import React, { useState, useEffect } from "react";
import { Stepper, Step, StepLabel } from "#material-ui/core";
const stepsOptions = {
0: [0],
1: [0, 1],
2: [0, 1, 2],
};
const StepIcon = styled.div`
background-color: ${({ backgroundColor }) =>
backgroundColor ? "#008a98" : "#DCDCDC"};
color: #fff;
width: 50px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
border-radius: 50%;
margin-top: -13px;
font-weight: 500;
z-index: 1;
`;
const Component = () => {
const [stepsArray, setStepsArray] = useState([]);
useEffect(() => {
setStepsArray(stepsOptions[activeStep]);
}, [activeStep]);
return (
<Stepper activeStep={activeStep} alternativeLabel>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel
icon={
<StepIcon backgroundColor={stepsArray.includes(index)}>
<p>{index + 1}</p>
</StepIcon>
}
>
<Paragraph>{label}</Paragraph>
</StepLabel>
</Step>
))}
</Stepper>
)}
I have to import a custom svg icon and use it as a button within my application
What I have been doing it is,
import high from '../img/high.svg';
const styles = theme => ({
icon: {
color: red[800],
height: '15px',
width: '15px',
cursor: 'pointer'
}
});
<IconButton><CardMedia image={high} className={classes.icon}/></IconButton>
But this does not behave like a button and I do not get the hand symbol for onClick. What is the best way to display the icon as a button?
Do a styled component that is styled s a span
interface IconProps {
color: 'blue' | 'red' | 'green';
size: string;
margin: string;
}
export const Icon = styled.span<IconProps>`
color: ${props => props.color || '#000000'};
font-size: ${props => props.size || ''};
margin: ${props => props.margin || null};
cursor: pointer;
`;
You do not have to use props like I have, but this works fine for me. spans are very useful when forcing styling on to things like text and SVGs.
Example
<Icon size="150px" color="green">
<i className="fab fa-fort-awesome-alt"/>
</Icon>
NOTE: I do use typescript. You may not need to use an interface if you dont use props. I just left it there as part of my example I have done.
I am using CSS in JS (JSS) with material-ui, it works fine, but i don't get what it's supposed to offer (more than style injection) in terms of features/coding facilities. I feel like i am missing something so i have some specific questions.
With the style injection, i can adapt the style to the context, for instance:
const buttonStyle = {
border: "2px solid black »,
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: "red"
};
if (success) {
buttonStyle.backgroundColor = "green";
}
With JSS, it looks like i need to "pre-build" the whole button style in its different potential colors:
const style = {
buttonSuccess: {
border: "2px solid black »,
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: « green »
},
buttonError: {
border: "2px solid black",
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backbroundColor: "red"
}
};
Is there any way to avoid to re-write the whole style when only one parameter is dynamic?
And another point, with JSS, it looks like we need to inject one class for each html element we need to style.
So if i have a table with 200 cells, am i supposed to add 200 classes into my DOM (when i could declare it only one time with a td selector in pure CSS)?
Is there a way to work with inherit style between parent and children components?
Because there is a dirty pattern i have written several time to merge a style i inject from the parent and the style the children compile by itself:
const styles = theme => ({
root: {
backgroundColor: "blue"
}
});
const childComponent = (props) => (
<div classeName={`${props.parentClass} ${props.classes}`} /> // See parentClass here
);
export default withStyles(styles)(childComponent);
Is there any way to avoid to re-write the whole style when only one parameter is dynamic?
Yes, see function values. http://cssinjs.org/json-api?v=v9.8.1#function-values
So if i have a table with 200 cells, am i supposed to add 200 classes into my DOM (when i could declare it only one time with a td selector in pure CSS)?
You can use '& td' selector, see jss-nested plugin, it is already built in.
http://cssinjs.org/jss-nested?v=v6.0.1
Is there a way to work with inherit style between parent and children components?
JSS doesn't modify inheritance model of CSS. I think you are trying to override a property that is defined by the core. Check out customization documentation https://material-ui.com/customization/overrides/