Im working with MUI-datatable and my table options contain
options:{
search: false,
searchOpen: true,
...
}
according to the docs "search:false" should only hide the icon to toggle the search bar, and searchOpen, should show the search bar by default.
But at the moment it removes the search bar AND icon.
Here is a sandbox where I have search set to disabled which only disables the icon (but actually want to set to false)
https://codesandbox.io/s/vigorous-haslett-40jlf?file=/src/App.js
Adding theme and overriding it by:
createMuiTheme({
overrides: {
MUIDataTableToolbar: {
iconActive: {
display: 'none',
},
},
},
})
Where iconActive is the Search Button
Related
I am currently using ReactJS(TypeScript) with TailwindCSS to create some forms, and I want my Submit button to use one of the yellow colors that come with Tailwind. However, when I have my react project running and I update the value to bg-yellow-300 , it will turn yellow, but when I first launch the react app, the button has its default color scheme, which I don't want. I've provided the code for the button below, and my config file:
<Button className="w-1/12 bg-yellow-300 hover:bg-yellow-400 text-black-100" type="submit">
Submit
</Button>
Config File:
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{js,jsx,ts,tsx}", 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
"gold":"#edcd37",
"babyblue":"#298ge5",
},
},
},
plugins: [
require('flowbite/plugin')
],
}
I've tried adding the JIT(Just in time) setting to see if for some reason that was why it wasn't giving the correct color on initial loading, but it didn't work either.
I want to disable Material-UI blur effect when a user opens a dropdown(select menu). maybe it's a nice effect for only one input, but imagine a form with 20 dropdowns and every time user clicks one of them the entire screen blur and becomes noisy and unhandy.
you can ovverride mui styles with MUI createTheme.
For my react application when I deleted this styles ovverride, the blur effect disappeared
image
you can just replace the blur with none
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: 'transparent',
backdropFilter: 'none',
'&.MuiBackdrop-invisible': {
backgroundColor: 'transparent',
backdropFilter: 'none'
}
}
}
},
you can read more here: https://mui.com/material-ui/customization/theming/
I want to change the color of the label circled here:
How would I go about doing so?
I have tried changing the color of the primary colors on the palette. Also, there does not seem to be a way to do it through CSS without affecting other components.
Here's my current code for the theme:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
day: {
color: "#436E70",
},
daySelected: {
backgroundColor: "#436E70",
},
dayDisabled: {
color: "#436E70",
},
current: {
color: "#436E70",
},
},
},
});
Material-UI pickers v3.3.10
https://material-ui-pickers.dev/guides/css-overrides
Variant: static
Npm package used: #material-ui/pickers
Someone suggested this post: Change header color of Material-UI Date Picker
That solution is 5+ years old already,getMuiTheme is not part of v3.3.10. Also the way described in that post does not work anymore, it does not matter where in the createMuiTheme object I put
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color,
},
It does not work, it doesn't have any effects. And the documentation also doesn't bring much light to the case.
Thanks in advance.
According to the documentation from your link the datepicker has a rule (sometimes called slot) called MuiPickersCalendarHeader. This rule is used to provide styling to a <div> tag that is an ancestor to the <p> tag that contains the text you've circled in your sample image (i.e. "July 2022"). You can see how these tags are structured in the Inspector tab of the Developer Tools Window in Firefox (in the browser highlight the text "July 2022", right-click the highlighted text, then from the context menu choose Inspect). Knowing the tag structure, we can apply a CSS selector to target the <p> tag like so:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
...
// MuiPickersCalendarHeader rule
MuiPickersCalendarHeader: {
switchHeader: {
['& > div > p']: {
// backgroundColor: lightBlue.A200,
// color: "white",
},
},
},
...
}
}
The above code is untested. If you have problems with it say so in a comment, and I'll try to test it.
Problem Description
I have changed the theme color by using <ConfigProvider prefixCls="custom">
ConfigProvider.config({
prefixCls: 'custom',
theme: {
primaryColor: '#1d2958',
},
});
However, antd will help me automatically generat a kind of "secondary color" like shown below.
I want to change this color because it is really not approprarite for my use case.
Many other components will also use this auto generated "secondary color" , you can find all here.
My nav items need to have colour and icon changes.
I'm finding however that the set of icons I seem to have and the iconClassName do not seem to be being shown
{
key: 'upload',
name: 'MAU',
icon: 'AlertSolid',
iconClassName: 'bg-90',
onClick: () => { return; },
['data-automation-id']: 'uploadNonFocusButton'
}
It appears that there is a limited set of icons supported within the Nav and CommandBar. Is this correct? I'm also surprised that the iconClassName is not being picked up.