I want to change the nav link icon color. If I set the primary color by creating a custom theme it won't effect.
<ThemeProvider
theme={{
palette: {
themePrimary: getTheme().palette.teal,
}
}}
>
Actually it worked on hover but not on normal view. I tried setting the iconProps but it didn't work either.
links: [
{
name: "Overview",
icon: "WebAppBuilderFragment",
iconProps: { color: "white" },
},
],
How can I change these icons color?
IconProps is an object with following props. Use styles to set icon color:
links: [
{
name: "Overview",
iconProps: {
iconName: 'WebAppBuilderFragment',
styles: {
root: { color: '#f00' },
},
},
},
],
Codepen working example.
Related
I use NativeBase Input Component and Costume Theme, I tried to change the font size of the input component in my costume theme I already tried to change it in the following examples, but it doesn't change.
How can I change the font size of the input component in my costume theme?
Example 1:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white", fontSize: "20" },
},
},
},
});
Example 2:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white"},
fontSize: "20",
},
},
},
});
You can use defaultProps. Read more about customizing Input component.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
color: 'red.400',
},
defaultProps: { size: '2xl' },
},
},
});
I'm trying to develop the front end of an application and I wanted to theme some boxes.
I pulled an example from here:
// theme.js
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
components: {
Button: {
// 1. We can update the base styles
baseStyle: {
fontWeight: "bold", // Normally, it is "semibold"
},
// 2. We can add a new button size or extend existing
sizes: {
xl: {
h: "56px",
fontSize: "lg",
px: "32px",
},
},
// 3. We can add a new visual variant
variants: {
"with-shadow": {
bg: "red.400",
boxShadow: "0 0 2px 2px #efdfde",
},
// 4. We can override existing variants
solid: (props) => ({
bg: props.colorMode === "dark" ? "red.300" : "red.500",
}),
},
},
},
})
export default theme
and adapted it to this test-code
const theme = extendTheme({
components: {
Box: {
// 1. We can update the base styles
baseStyle: {
},
// 2. We can add a new button size or extend existing
sizes: {
},
// 3. We can add a new visual variant
variants: {
Mini: {
fontWeight: "bold", // Normally, it is "semibold"
textDecoration: "underline",
boxShadow: "0px 30px 5px -20px rgba(0,0,0,0.75)"
}
},
},
},
})
The idea is that I can say <Box variant="Mini">, but that's not actually working. None of the styles have any affect on the box or it's content.
If I change Box: to Text: and add a Text element <Text variant="Mini">test</Text>, the styles are applied. It's also not working for Grid but does for Button
What am I doing wrong?
I do know that Box has a boxShadow property, but it's very limited.
I still haven't figured out how to modify Box with CSS, partly because the answer I'm about to give doesn't list a file for Box.
There's a note on the page
If you're curious as to what component styles you can override, please reference the default component style files.
When I wanted to modify Drawer, I found the same issue. I went to that link and opened drawer.ts. In there I found this function
const baseStyle: PartsStyleFunction<typeof parts> = (props) => ({
overlay: baseStyleOverlay,
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog(props),
header: baseStyleHeader,
closeButton: baseStyleCloseButton,
body: baseStyleBody,
footer: baseStyleFooter,
})
Which gives me some useful keys. I then found of I modified my theme styles like so, I could modify facets as expected.
import { extendTheme } from '#chakra-ui/react';
let theme = extendTheme({
components: {
Drawer: {
baseStyle: {
dialog: {
bg: "blue",
},
closeButton: {
bg: "hotpink",
},
header: {
bg: "red",
},
},
},
}
});
read the documentation in layer styles, i had the same problem with Grid component and also tried the same as you, thanks for the answer
https://chakra-ui.com/docs/theming/component-style#usestyleconfig-api
https://chakra-ui.com/docs/features/text-and-layer-styles
This is the dependency I'm using for the editor and they have an example where they modify the default toolbar to remove certain options, I would like to remove some options but the example is very lacking and doesn't show how to add all the options I would like and I don't know how to add them.
This is the example from the dependency page
<template>
<div id="app">
<vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>Html For Editor</h1>",
customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]]
};
}
};
</script>
I would like in my toolbar something like this
customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
[{ align: "left" }, { align: "center" }, { align: "right"}, { align: "justify"}],
[{ color: "color-picker" }]],
However this is the result, the align: left is not showing up and the color: color-picker doesn't work. If I click on the color picker nothing happens and no menu shows up
I'm not sure how I could get this to work
This is the CodeSandBox my current setup that doesn't work
Using the following configuration should fix the issues:
customToolbar: [
["bold", "italic", "underline"],
[{ list: "ordered" }, { list: "bullet" }],
[
{ align: "" },
{ align: "center" },
{ align: "right" },
{ align: "justify" }
],
[{ color: [] }]
]
Here is the code for the standard configuration of the toolbar:
https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
I have been stuck on this problem all morning. I have read multiple GitHub issues and StackOverflow posts and nothing has worked.
I want to remove the blue back button in the top left of the below pic.
I have noticed I am having trouble customizing the top bar altogether. I cannot add a title to the back button etc (this hint might indicate what is wrong).
Navigation.setRoot
Navigation.events().registerAppLaunchedListener(() => {
Reactotron.log('5');
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
id: STARTING_SCREEN,
name: STARTING_SCREEN
}
}],
}
},
layout: {
orientation: 'portrait',
},
}).then(()=>Reactotron.log('7'));
Navigation.push
SplashScreen (root screen) -> AccessScreen (next screen).
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
visible: false,
}
}
}
It's almost as if I am specifying the backButton options in the wrong place.
A tricky workaround
leftButtons: [
{
id: 'something',
text: '',
},
],
the text: '' will keep a empty space, so will hide the button.
Actually not hide, but yea you can say that too.
You're good to go!!
Use it but only working for ios
Navigation.setDefaultOptions({
topBar: {
backButton: {
visible: false
}
},
})
or you can customize topBar
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
background: YourComponent
}
}
}
I'm using the search bar in a react-native app (iOS 11+).
These are the options I gave to my screen:
options: {
topBar: {
title: {
text: 'MyTitle',
testID: TOP_APPS_ID,
},
searchBar: true,
searchBarHiddenWhenScrolling: true,
},
},
And it does display the search bar:
However, I would like to remove the bottom border it adds by default.
How can I achieve this? I tried setting "noBorder" to true in the topBar options but it still shows the border.