Having trouble finding documentation on how to change the default border color of an outlined Textfield on hover using a custom theme on Material ui.
MuiOutlinedInput: {
root: {
"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
border: "2px solid",
borderColor: "yellow"
}
}
}
Reference
Example
MUI v5
MuiTextField: {
styleOverrides: {
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'black',
},
'&:hover fieldset': {
borderColor: 'red',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
},
}
Related
I'd like to change the default white in the Material UI theme from #fff to #fdf6e3.
I'd expect instances of default white to change but I'm not sure if this is even the right way to do this.
export const newTheme = createTheme(baseTheme, {
palette: {
mode: "light",
common: { white: "#fdf6e3" },
background: { default: "#073642" },
primary: { main: "#002b36" },
secondary: { main: "#dc322f" },
},
})
I found the structure here: https://mui.com/material-ui/customization/default-theme
how to remove this xasix top line
i want to be like this :
i read a lot of highcharts documents ,but i can't found the answer,I wonder if you have any solutions
my highchars code is:
{
xAxis: {
lineWidth :0,//去掉x轴线
categories: $xAxisData,
tickmarkPlacement: 'on',
gridLineWidth: 1,
gridLineColor: '#808080',
title: {
enabled: false
},
labels: {
style: {
color: '#ffffff'
}
}
},
legend: {
enabled: false
},
yAxis: {
lineWidth: 1,
lineColor: '#808080',
tickmarkPlacement: 'on',
gridLineColor: '#808080',
title: {
text: null
},
labels: {
format: '{value}',
style: {
color: '#ffffff',
fontSize: 12
}
}
},
credits: {
enabled:false
},
tooltip: {
split: false,
valueSuffix: '条'
},
}
Can anyone help me? Thanks a lot!
remove the x axais top line
You can use styled mode to hide grid line on yaxis, article of how to style by css. Catch the last element using CSS pseudo-class :last-of-type and choose how to hide visibility stroke: transparent; or stroke: transparent;.
.highcharts-yaxis-grid path:last-of-type {
/* stroke: transparent; */
stroke-width: 0px;
}
Demo: https://jsfiddle.net/BlackLabel/xdrj846h/
I want to give my Outlined textField green color on focus and if error occurs durring typing, then color should be changes to red.
But in my case if I am giving
"& .MuiOutlinedInput-root": {
"&.Mui-focused fieldset": {
borderColor: 'green'
},
},
if shows green on error too during focus.
.Mui-focused is a separate class than .Mui-error, so you'll have to override each individually. See the docs for a full list of all CSS classes available on this component.
Here is an example of customizing multiple classes:
import { styled } from '#mui/material/styles'
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'yellow',
},
'&.Mui-focused fieldset': {
borderColor: 'green',
},
},
})
Here is a live demo of customized OutlinedInputcomponents.
How can I refer the palette in a theme override?
e.g. I want to change the selected Tab to have the secondary color as background, instead of hardcoded blue
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
"&$selected": { backgroundColor: "blue" }, // TODO palette.secondary.main instead of blue
}
}
},
palette: {
primary: { main: "black" },
secondary: { main: "blue" }
}
});
You can create palette object that you can refer to:
import { createMuiTheme } from '#material-ui/core';
import createPalette from '#material-ui/core/styles/createPalette';
const palette = createPalette({
primary: { main: "black" },
secondary: { main: "blue" }
});
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
"&$selected": { backgroundColor: palette.secondary.main },
}
}
},
palette
});
I have the following code to contruct a pie chart.
The problem is i don't get a shadow.
Note : If the chart config, theme='Base', then the pie has a shadow
Ext.define('ChartPanel', {
extend: 'Ext.panel.Panel',
//------------------CONSTRUCTOR
, constructor: function(externalConfigs) {
externalConfigs = externalConfigs || {};
var configs = {
title: 'My panel',
items: [
{
xtype: 'chart',
store: myStore,
width: '30%',
series: [{
type: 'pie'
, field: 'persentage'
, shadow: 'sides'
, showInLegend: false
, donut: false
, renderer: function(sprite, record, attributes, index, store) {
if (record.data.description == 'option1') {
sprite.setAttributes({
fill: 'url(#redGradient)',
stroke: '#ffffff'
}, false);
} else if (record.data.description == 'option2') {
sprite.setAttributes({
fill: 'url(#greenGradient)',
stroke: '#ffffff'
}, false);
}
}
}]
, gradients: [{
id: 'redGradient',
angle: 45,
stops: {
0: { color: '#820000' },
100: { color: '#BD1E00' }
}
}, {
id: 'greenGradient',
angle: 0,
stops: {
0: { color: '#89AC10' },
100: { color: '#A1C22D' }
}
}]
}
]
}
Ext.apply(configs, externalConfigs);
this.callParent([configs]); //Call the parent constructor
}
});
Any ideas how to get a shadow?
Thanks
Use shadow: true (see the docs in the previous link to see other possible options) within your chart definition. (Not within the pie definition). There is no shadow config property for Ext.chart.series.Pie. You would need to use shadowAttributes within Ext.chart.series.Pie.
I found that
return attributes;
inside the renderer is essential.