So Im trying to vertically center the text in the input, this is the styles that Im applying:
inputElement: {
fontSize: theme.font_size.text,
height: inputHeight || theme.TEXT_INPUT_HEIGHT,
},
Upper part does not work at all, this styles can't be applied to the TextInput
And here is the theme that Im applying:
const paperStyles = {
theme: {
success: {
colors: {
primary: theme.border_color.input.success,
placeholder: theme.border_color.input.default,
underlineColor: 'red',
background: theme.colors.background_main,
// placeholder: theme.TEXT_INPUT_OUTLINE_SUCCESS,
},
},
error: {
colors: {
primary: theme.border_color.input.error,
// placeholder: theme.TEXT_INPUT_OUTLINE_ERROR,
},
},
},
mode: theme.form.text_input.mode,
};
This part works, but where and how I can apply property for vertical align?
And here is the component:
<TextInput
onChangeText={onChange}
style={{
...styles.inputElement,
}}
mode={styles.mode}
theme={error ? styles.theme.error : styles.theme.success}
value={value}
secureTextEntry={password && secureTextEntry}
multiline={multiline}/>
Related
I'm trying to customize the color of my MUI5 TextField component. Simply overriding the primary and secondary colors is not enough, so I'm striving for more control over the colors.
The component:
<TextField
label='Username'
variant='outlined'
onChange={(e) => setToken(e.target.value)}
value={token}
size='small'
/>
This is the theme that I use:
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'.MuiOutlinedInput-root': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
color: 'pink',
'&.Mui-focused': {
color: 'pink',
},
},
},
},
},
});
These style overrides are enough to control the color of
the label (Username) when the TextField is focused and unfocused
the border color when the TextField is unfocused or (focused AND hovered over)
The problem is that I haven't been able to change the border color when the TextField is active and not hovered over. This is the style that is applied on it: css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notchedOutline
I tried different combinations of style overrides in the custom theme but no luck so far.
Can someone tell me how to change the border color in the above case?
Maybe I should build a component with more basic components if I want such fine-grained control over colors?
try this:
styleOverrides: {
root: {
'&.Mui-focused': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
},
'&.Mui-error': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
},
},
}
I am trying to make a react-select component but I keep running into an issue where if I change the high and width of the original react-select it throws everything else of center.
Here is the original react-select box code:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
export default function Example(){
return (
<Select options={options}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and a picture:
original react-select image
this is size of react-select box I want:
height: 20,
width: 118.5
modified react-select for correct height and width
as you can see it throws off the placement of the input box, placeholder, and icons.
Here is the code for the above image:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
and this is how I have been trying to modify the component. This has gotten me somewhat close to the desired outcome but the input box sizing and icon placements are still off and sized weird:
import React from 'react'
import Select from 'react-select'
const options = [
{ value: 'item-1', label: 'item-1' },
{ value: 'item-2', label: 'item-2' },
{ value: 'item-3', label: 'item-3' },
{ value: 'item-4', label: 'item-4' }
]
const customStyles = {
control: base => ({
...base,
height: 20,
minHeight: 20,
width: 118.5,
}),
valueContainer: base => ({
...base,
height: 20,
minHeight: 20,
width:20,
alignItems: 'left',
}),
indicatorsContainer: base => ({
...base,
height: 20,
minHeight: 20,
alignItems: 'center',
}),
}
export default function Example(){
return (
<Select options={options}
styles={customStyles}
closeMenuOnSelect={true}
placeholder="Placeholder"
/>
)}
react-select what I have been able to achieve with the posted code image 1
react-select what I have been able to achieve with the posted code image 2
I have been at this for hours and I just cannot seem to get everything to fit nice and neat into the react-select box when I resize it. Any help would be greatly appreciated.
I am trying to built a barchart component via "react-chartjs-2". I did pretty much paste my code from here: https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/.
This is how it looks:
import React from 'react';
import {Bar} from "react-chartjs-2";
const BarChart = () => {
const barChartData = {
labels: ["October", "November", "December"],
datasets: [
{
data: [8137119, 9431691, 10266674],
label: "Infected People",
borderColor: "#3333ff",
backgroundColor: "#547db4",
fill: true
},
{
data: [1216410, 1371390, 1477380],
label: "Deaths People",
borderColor: "#ff3333",
backgroundColor: "#f7813e",
fill: true
}
]
};
const barChart = (
<Bar
type="bar"
width={130}
height={50}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months",
fontSize: 15
},
legend: {
display: true, //Is the legend shown?
position: "bottom" //Position of the legend.
}
}}
data={barChartData}
/>
);
return barChart;
};
export default BarChart
Everything seems to be working fine, besides the fact that the options prop is not being recognized by the code.
Did anyone come across a similar issue and can help me out?
Update options prop as bellow.
options = {{
plugins: {
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months"
},
legend: {
display: true,
position: "bottom"
}
}
}}
i have tried everything to override mui checkbox and radio from theme with no luck
components: {
...
MuiCheckbox: {
styleOverrides: {
root: {
color: pallette.lightBlack,
},
colorSecondary: {
'&$checked': {
color: pallette.lightBlack,
},
},
},
},
MuiRadio: {
styleOverrides: {
root: {
color: pallette.lightBlack,
},
colorSecondary: {
'&$checked': {
color: pallette.lightBlack,
},
},
},
},
So far not able to make that work only from sx prop like this
<Radio
sx={{
'&, &.Mui-checked': {
color: pallette.lightBlack,
},
}}
/>
I was dealing with this issue too using MUI v5.8
In order to override the styled for the radio both checked and unchecked, something like this worked for me.
MuiRadio: {
styleOverrides: {
root: {
color: palette.secondary,
"&.Mui-checked": {
color: palette.secondary,
}
}
}
}
The & allows you to select the Mui-checked class. This can be used in many places when overriding the styles. Check the assigned classes for the components your are looking to override.
You might misspelled palette. Try changing pallette to palette.
I want to modify ripple effect duration in theme file
I've tried things like
const theme = createMuiTheme({
props: {
MuiButtonBase: {
TouchRippleProps: {
animationDuration: '5s',
transitionDuration: '5s',
},
classes: {
root: 'CustomizeTouchRipple'
}
},
}
})
Not working.. but class is added
Edit:
I found its a constant in TouchRipple component
https://github.com/mui-org/material-ui/blob/c06a88d24235685dd769c1a3df82152ded17a6ca/packages/material-ui/src/ButtonBase/TouchRipple.js#L8
From the source, the class name where the animationDuration is set is MuiTouchRipple-rippleVisible. You just need to override that value:
V5
<Button
sx={{
'&& .MuiTouchRipple-rippleVisible': {
animationDuration: '200ms',
},
}}
>
V4
const theme = createTheme({
overrides: {
MuiButton: {
root: {
'& .MuiTouchRipple-rippleVisible': {
animationDuration: '200ms',
},
},
},
// if you want to change the ripple duration of all components that have ripple
// effect (e.g. Button, CardActionArea, FAB...)
MuiTouchRipple: {
rippleVisible: {
animationDuration: '200ms',
},
},
},
});