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.
Related
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.
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
I'm using react dnd and it's useDrag method not working properly. Let me elaborate the situation:
User will drag list item from left to right as stated below:
Final outcome of right side will be like this below pic,
every list items list 1, 2, 3 will be draggable everywhere and droppable.
The list items List 1 useDrag code is :
const [{ isDragging }, drag, preview] = useDrag({
item: {
type: 'tool',
id: id
},
canDrag: true,
begin(props, monitor, component) {
document.querySelectorAll(".rowWrapper").forEach(function(item){
item.classList.add("rowBorder", "pd-row-drag", "mb-row-drag");
});
document.querySelectorAll(".drop-area").forEach(function(element) {
element.classList.add("dropAreaPosition");
});
document.querySelectorAll(".rowBorderOverlay").forEach(function(element) {
element.classList.add("hideElement");
});
document.querySelectorAll(".rowActions").forEach(function(element) {
element.classList.add("hideElement");
});
},
end(props, monitor, component) {
document.querySelectorAll(".rowWrapper").forEach(function(element) {
element.classList.remove("rowBorder", "pd-row-drag", "mb-row-drag");
});
document.querySelectorAll(".dropZone").forEach(function(element) {
element.classList.remove("showDropZone");
});
document.querySelectorAll(".drop-area").forEach(function(element) {
element.classList.remove("placeHolder","dropAreaPosition");
});
document.querySelectorAll(".rowActions").forEach(function(element) {
element.classList.remove("hideElement");
});
},
collect: monitor => ({
item: monitor.getItem(),
isDragging: !!monitor.isDragging()
}),
});
What I'm doing here is, when dragging begins I'm doing the above stuff like adding classes/removing. By doing like this, useDrag is not working properly when you drag list 1 the full container is not draggable only the portion of it.
if I remove begin, end I can drag the entire container, I don't know what's causing the problem here ?
Any help on this really appreciable ? or how do I do the stuff like adding classes/removing whild dragging or drag begin ?
What am I trying to achieve
Currently, I am trying to implement localization within our current React-Native project.
To do this, I choose the following package: React-Localization
Our project makes usage of React-Native in combination with TypeScript.
What is the problem
I have written a function to set the language from "en" to "nl".
Then I have two pages:
Home (contains the function to change the language & has a Text element)
Settings (has a Text element)
Only the text on the Home page gets updated. The text element on the Settings page is not getting translated. Also my header and bottom navigation are not translated.
What code am I using
To switch the language
switchLanguage() {
if (translationStrings.getLanguage().toLowerCase() == 'nl') {
translationStrings.setLanguage('en');
} else {
translationStrings.setLanguage('nl');
}
this.setState({});
}
Translations
export const translationStrings = new LocalizedStrings({
en: {
tempTest: "English test one",
tempTest2: "English test two"
},
nl: {
tempTest: "Dutch test een",
tempTest2: "Dutch test twee"
}
});
Examples of the elements that I am trying to translate.
// This is on the home page so it works.
<Text>
{translationStrings.tempTest}
</Text>
// This is on the settings page and it does not work.
<Text>
{translationStrings.tempTest2}
</Text>
Also, the header and bottom navigation is not updating/getting translated.
Could someone give me some insight into what I am exactly doing wrong?
It feels like I should give the application a sign that everything has been translated and that it should reload or something.
So for the other pages, I have used React Redux to translate the content.
I managed to get my bottom navigator translated by doing the following changes for the navigation options.
Old ->
Settings: {
screen: Settings,
navigationOptions: {
tabBarLabel: i18next.t('Settings')
},
},
New -->
Settings: {
screen: Settings,
navigationOptions: ({ navigation, navigationOptions }) => ({
tabBarLabel: i18next.t('Settings')
}),
},
I've searched extensively for this issue here and haven't been able to figure this out. I have a google chart in my app and have a callback function in place to get the details of each point when selected so that I can update a modal to display more info elsewhere.
However, when I have this callback activated and the user clicks the item, the crosshairs do not stay. When I don't have the callback active, they do remain and I get a nice small circle around the selected point like this:
image of crosshairs
Here are the chartevent details I have in place which are working to return the details of the point. Is the chartevent option perhaps overriding a crosshair default?
Grateful for any advice.
Cheers.
const chartEvents = [{
eventName: "select",
options: {
tooltip: {
trigger: "selection"
}
},
callback: ({ chartWrapper }) => {
const chart = chartWrapper.getChart().getSelection()[0].row;
this.setState((prevState) => ({ selectedMonth: chart }))
this.setChangedMonth()
}
}]