I'm trying to add styling to child components of a React Native View. Since you cant use the > * selector in React Natives StyleSheet.create function how do you achieve this result?
Here is the code of a form I want to style:
<View style={styles.container}>
<View style={styles.centered}>
<Button mode="contained" onPress={onAddItem} style={styles.default}>
Add Item
</Button>
</View>
{showForm ? (
<View style={styles.form}>
<TextInput
label="Title"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={title.value}
onChangeText={(text) => setTitle({ value: text, error: '' })}
error={!!title.error}
errorText={title.error}
autoCapitalize="none"
/>
<DropDownPicker
label="Select Type"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<DropDownPicker
open={open2}
value={value2}
items={condition}
setOpen={setOpen2}
setValue={setValue2}
setItems={setCondition}
/>
<TextInput
label="Quantity"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={quantity.value}
onChangeText={(text) => setQuantity({ value: text, error: '' })}
error={!!quantity.error}
errorText={quantity.error}
autoCapitalize="none"
/>
</View>
) : null}
</View>
I'm just starting to use material ui and having a hard time trying to style the active list item of a sidebar menu. Here's what I've tried so far. What am I missing or doing wrong?
<>
<ListItemButton onClick={i.onClick}>
<Icon/>
<ListItemText primary={i.listItemText} />
</ListItemButton>
<Collapse in={open} timeout='auto' unmountOnExit>
<List component='div' disablePadding>
{i.nestedItems?.map((n, idx) => (
<ListItemButton sx={{ pl: '4.3rem' }}>
<ListItemText
primary={i.nestedItems[idx]}
/>
</ListItemButton>
))}
</List>
</Collapse>
</>
))}
I've tried styling it in them theme like som but it doesn't work:
styleOverrides: {
root: {
"&:focus": {
fontWeight: baseTheme.typography.fontWeightBold
},
},
},
}
I'm trying to change the borderColor on this Select Component from Native base.
Here is an image of the default color and the focused color:
The border is black by default. I already tried with borderColor="" and none/unset but it isn't changing the color.
How can I change the default and active border color?
The code is here..
useState,
} from 'react';
import {
Box,
Select,
CheckIcon,
} from 'native-base';
function Dropdown({
options = [],
placeholder,
backgroundColor,
className,
onChange = () => {},
}) {
const [value, setValue] = useState('');
return (
<Box>
<Box width="3/4" maxWidth="300">
<Select
className={className}
onChange={onChange}
minWidth="200"
selectedValue={value}
accessibilityLabel="Choose Service"
placeholder={placeholder}
backgroundColor={backgroundColor}
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
_focus={{
bg: 'white',
}}
marginTop={1}
onValueChange={(itemValue) => setValue(itemValue)}
>
{options.map((option) => (
<Select.Item
label={option.label}
value={option.value}
key={option.value}
style={{ display: 'flex', flexDirection: 'column', padding: 5 }}
/>
))}
</Select>
</Box>
</Box>
);
}```
You can use borderColor to specify border color and borderWidth to specify border width. To specify border color for focused inside _focus.
const Example = () => {
let [service, setService] = React.useState('');
return (
<Center>
<Box w="3/4" maxW="300">
<Select
_focus={{ borderColor: 'yellow.500' }}
borderColor="red.500"
selectedValue={service}
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Choose Service"
_selectedItem={{
bg: 'teal.600',
endIcon: <CheckIcon size="5" />,
}}
mt={1}
onValueChange={(itemValue) => setService(itemValue)}
>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
</Box>
</Center>
);
};
This is the first time I am using chakra UI for my project. I am following the documentation to implement the UI. The drawer example mentioned in the documentation works perfectly. But when I try to use the same for my project the background does not dim.
Here is the screenshot of the same.
Below is the code for the same.
Filename: Campaigns.js
The drawer component is at the end of the file (CreateCampaign)
import React from "react";
import {
Avatar,
Box,
Collapse,
DrawerContent,
DrawerOverlay,
Flex,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
Text,
useColorModeValue,
useDisclosure,
useColorMode,
Button,
Drawer,
} from "#chakra-ui/react";
import {AddIcon} from '#chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';
import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
export default function Swibc() {
const sidebar = useDisclosure();
const integrations = useDisclosure();
// Create campaign drawer hooks
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = React.useRef();
let { path, url } = useRouteMatch();
const { toggleColorMode: toggleMode } = useColorMode();
const SwitchIcon = useColorModeValue(FaMoon, FaSun);
const NavItem = (props) => {
const { icon, children, ...rest } = props;
return (
<Flex
align="center"
px="4"
pl="4"
py="3"
cursor="pointer"
color={useColorModeValue("inherit", "gray.400")}
_hover={{
bg: useColorModeValue("gray.100", "gray.900"),
color: useColorModeValue("gray.900", "gray.200"),
}}
role="group"
fontWeight="semibold"
transition=".15s ease"
{...rest}
>
{icon && (
<Icon
mr="2"
boxSize="4"
as={icon}
/>
)}
{children}
</Flex>
);
};
const SidebarContent = (props) => (
<Box
as="nav"
pos="fixed"
top="0"
left="0"
zIndex="sticky"
h="full"
pb="10"
overflowX="hidden"
overflowY="auto"
bg={useColorModeValue("white", "gray.800")}
borderColor={useColorModeValue("inherit", "gray.700")}
borderRightWidth="1px"
w="60"
{...props}
>
<Flex px="4" py="5" align="center">
<Text
fontSize="2xl"
ml="2"
color={useColorModeValue("brand.500", "white")}
fontWeight="semibold"
>
cffp
</Text>
</Flex>
<Flex
direction="column"
as="nav"
fontSize="sm"
color="gray.600"
aria-label="Main Navigation"
>
<NavItem icon={MdHome}>Home</NavItem>
<NavItem icon={FaRss}>Articles</NavItem>
<NavItem icon={HiCollection}>Collections</NavItem>
<NavItem icon={FaClipboardCheck}>Checklists</NavItem>
<NavItem icon={HiCode} onClick={integrations.onToggle}>
Integrations
<Icon
as={MdKeyboardArrowRight}
ml="auto"
transform={integrations.isOpen && "rotate(90deg)"}
/>
</NavItem>
<Collapse in={integrations.isOpen}>
<NavItem pl="12" py="2">
Shopify
</NavItem>
<NavItem pl="12" py="2">
Slack
</NavItem>
<NavItem pl="12" py="2">
Zapier
</NavItem>
</Collapse>
<NavItem icon={AiFillGift}>Changelog</NavItem>
<NavItem icon={BsGearFill}>Settings</NavItem>
</Flex>
</Box>
);
return (
<>
<Box
as="section"
bg={useColorModeValue("gray.50", "gray.700")}
minH="100vh"
>
<SidebarContent display={{ base: "none", md: "unset" }} />
<Drawer
isOpen={sidebar.isOpen}
onClose={sidebar.onClose}
placement="left"
>
<DrawerOverlay />
<DrawerContent>
<SidebarContent w="full" borderRight="none" />
</DrawerContent>
</Drawer>
<Box ml={{ base: 0, md: 60 }} transition=".3s ease">
<Flex
as="header"
align="center"
justify="space-between"
w="full"
px="4"
bg={useColorModeValue("white", "gray.800")}
borderBottomWidth="1px"
borderColor={useColorModeValue("inherit", "gray.700")}
h="14"
>
<IconButton
aria-label="Menu"
display={{ base: "inline-flex", md: "none" }}
onClick={sidebar.onOpen}
icon={<FiMenu />}
size="sm"
/>
<InputGroup w="96" display={{ base: "none", md: "flex" }}>
<InputLeftElement color="gray.500" children={<FiSearch />} />
<Input placeholder="Search for articles..." />
</InputGroup>
<Flex align="center">
<Button
colorScheme="brand"
size="sm"
mr={[1,1,3]}
onClick={onOpen}
ref={btnRef}
>
Create <AddIcon ml={[1,1,2]} />
</Button>
<Avatar
mr="4"
size="sm"
name="anubra266"
src="https://avatars.githubusercontent.com/u/30869823?v=4"
cursor="pointer"
/>
<Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
</Flex>
</Flex>
<Box as="main" p="4">
<Switch>
<Route path={path} exact>
<Campaigns />
</Route>
<Route path={`${path}/new`}>
<DonationBasedForm />
</Route>
</Switch>
</Box>
</Box>
</Box>
<CreateCampaign onClose={onClose} isOpen={isOpen} btnRef={btnRef}/>
</>
);
}
Filename : CreateCampaigns.js
import React from 'react';
import {
Drawer,
DrawerContent,
DrawerCloseButton,
DrawerFooter,
DrawerBody,
DrawerHeader,
Stack,
Box,
FormLabel,
InputGroup,
Input,
InputLeftAddon,
InputRightAddon,
Textarea,
Button,
Select
} from '#chakra-ui/react';
const CreateCampaign = (props) => {
return (
<Drawer
isOpen={props.isOpen}
placement="right"
onClose={props.onClose}
size="xl"
>
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px">
Create a new account
</DrawerHeader>
<DrawerBody>
<Stack spacing="24px">
<Box>
<FormLabel htmlFor="username">Name</FormLabel>
<Input
id="username"
placeholder="Please enter user name"
/>
</Box>
<Box>
<FormLabel htmlFor="url">Url</FormLabel>
<InputGroup>
<InputLeftAddon>http://</InputLeftAddon>
<Input
type="url"
id="url"
placeholder="Please enter domain"
/>
<InputRightAddon>.com</InputRightAddon>
</InputGroup>
</Box>
<Box>
<FormLabel htmlFor="owner">Select Owner</FormLabel>
<Select id="owner" defaultValue="segun">
<option value="segun">Segun Adebayo</option>
<option value="kola">Kola Tioluwani</option>
</Select>
</Box>
<Box>
<FormLabel htmlFor="desc">Description</FormLabel>
<Textarea id="desc" />
</Box>
</Stack>
</DrawerBody>
<DrawerFooter borderTopWidth="1px">
<Button variant="outline" mr={3} onClick={props.onClose}>
Cancel
</Button>
<Button colorScheme="blue">Submit</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
export default CreateCampaign;
You'll need to use the DrawerOverlay component:
import { DrawerOverlay } from '#chakra-ui/react'
As seen in this example on line 30, the DrawerOverlay component should be at the top of the Drawer component:
import React from 'react';
import {
Drawer,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
DrawerFooter,
DrawerBody,
DrawerHeader,
Stack,
Box,
FormLabel,
InputGroup,
Input,
InputLeftAddon,
InputRightAddon,
Textarea,
Button,
Select
} from '#chakra-ui/react';
const CreateCampaign = (props) => {
return (
<Drawer
isOpen={props.isOpen}
placement="right"
onClose={props.onClose}
size="xl"
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader borderBottomWidth="1px">
Create a new account
</DrawerHeader>
<DrawerBody>
<Stack spacing="24px">
<Box>
<FormLabel htmlFor="username">Name</FormLabel>
<Input
id="username"
placeholder="Please enter user name"
/>
</Box>
<Box>
<FormLabel htmlFor="url">Url</FormLabel>
<InputGroup>
<InputLeftAddon>http://</InputLeftAddon>
<Input
type="url"
id="url"
placeholder="Please enter domain"
/>
<InputRightAddon>.com</InputRightAddon>
</InputGroup>
</Box>
<Box>
<FormLabel htmlFor="owner">Select Owner</FormLabel>
<Select id="owner" defaultValue="segun">
<option value="segun">Segun Adebayo</option>
<option value="kola">Kola Tioluwani</option>
</Select>
</Box>
<Box>
<FormLabel htmlFor="desc">Description</FormLabel>
<Textarea id="desc" />
</Box>
</Stack>
</DrawerBody>
<DrawerFooter borderTopWidth="1px">
<Button variant="outline" mr={3} onClick={props.onClose}>
Cancel
</Button>
<Button colorScheme="blue">Submit</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
)
}
export default CreateCampaign;
I hope that this answers your question!
I have a basic Card.
I want the image to change its src when I mouseover on the card.
I can change the image when I mouseover on the <img/> tag itself like so :
<img src={item.iconUrl}
onMouseOver={e => (e.currentTarget.src = item.iconHoverUrl)}
onMouseOut={e => (e.currentTarget.src = item.iconHoverUrl)}
className="mr-3 avatar-lg rounded" alt="app_icon"
/>
But I don't find any way to reference this image's src when I'm out of it's scope.
I tried setting the content of src into a variable and changing it's value on the card's mouseover but that won't trigger an update of the src of the image so it doesn't work either.
Here is the code of the component if it helps :
<Card className="app-hover" style={{ marginTop: '10px', height: '92%', overflow: 'hidden' }}>
<CardBody className="p-3">
<Media>
<img src={item.iconUrl}
onMouseOver={e => (e.currentTarget.src = item.iconHoverUrl)}
onMouseOut={e => (e.currentTarget.src = item.iconHoverUrl)}
className="mr-3 avatar-lg rounded" alt="app_icon" />
<Media body>
<Row style={{ marginLeft: '4px', marginTop: '15px' }}>
<h5 className="mt-1 mb-0">{this.props.i18n.language === 'en' ? item.title : item.titleFR}</h5>
</Row>
</Media>
</Media>
<Row>
<Col lg={6}>
<Media>
<CreditCard className="icon-dual align-self-center mr-2"></CreditCard>
<Media body>
<h5 className="mt-2 pt-1 font-size-16">{this.props.i18n.language === 'en' ? 'Not Owned' : 'Non-Acquis'}</h5>
</Media>
</Media>
</Col>
<Col lg={6}>
<Media>
<Users className="icon-dual align-self-center mr-2"></Users>
<Media body>
<h5 className="mt-2 pt-1 font-size-16">
{
item.stats ? item.stats.users : ''
}
</h5>
</Media>
</Media>
</Col>
</Row>
<Row className="mt-2 border-top pt-2" style={{ paddingLeft: '8px', paddingRight: '8px' }}>
<p className="text-muted">{this.props.i18n.language === 'en' ? item.shortDescription : item.shortDescriptionFR}</p>
</Row>
</CardBody>
Is it possible to do it the way I have it setup? As you can obviously see from the code, the image is fetched from an api and always changing so I can't simply hardcode the animation in CSS.
You should not try to change the DOM "directly", instead you should call a function that mutate the state and use the new icon from the state itself. Let me explain with an example:
const [icon, setIcon] = useState("");
const onMouseOver = () => setIcon("the-over-icon");
const onMouseOut = () => setIcon("the-not-over-icon");
// ...
<Card onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
<img src={icon} />
</Card>
I will extract img into functional component. In Typescript something like.
import React from "react";
import { useState } from "react";
interface IMyImgProps{
iconUrl: string;
iconHoverUrl: string;
}
export const MyImg: React.FunctionComponent<IMyImgProps> = props => {
const [icon, setIcon] = useState(props.iconUrl);
const onMouseOver = () => setIcon(props.iconHoverUrl);
const onMouseOut = () => setIcon(props.iconUrl);
return <img src={icon} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
}