I'm attempting to style markers to my map, but nothing works.
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas#3/states-10m.json";
const MapChart = () => {
return (
<ComposableMap projection="geoAlbersUsa">
<Geographies geography={geoUrl}>
{({ geographies }) => (
<>
{geographies.map(geo => (
<Geography
key={geo.rsmKey}
stroke="#FFF"
geography={geo}
fill="#DDD"
/>
))}
</>
)}
</Geographies>
{airports.map((item, index) => {
return <Marker key={index} coordinates={[marker.LONGITUDE, marker.LATITUDE]} onClick={handleClick.bind(this, marker)}
style={{
cursor: "pointer"
default: { fill: "#06F" },
hover: { fill: "#000" },
pressed: { fill: "#02A" },
}}
>
<circle r={5} fill="#F53" />
</Marker>
})}
</ComposableMap>
)}
The style part is not effective on the markers at all.
What I'm I missing?
Related
I have a react component that dynamically loads a widget component using react lazy, with the component path passed as a prop.
It renders fine, but when I drag it, the component flickers between its Suspense fallback and the fully rendered component. How can I prevent the Suspense fallback from being shown while dragging?
The draggable list looks like this:
<DragDropContext
onDragEnd={result => {
console.log(result);
reorder({ result, previousData: dashboard.data });
}}
>
<Title title={`Dashboard`} />
<Droppable droppableId={"dashboard"}>
{(
provided
// snapshot
) => {
return (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{
display: "flex",
flexDirection: "column"
}}
>
{Array.isArray(dashboardItems.data) && dashboardItems.data.length > 0 ? (
dashboardItems.data.map((item: any, index: number) => {
return (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => {
return (
<div ref={provided.innerRef} {...provided.draggableProps}>
<WidgetCard item={item} dragHandleProps={provided.dragHandleProps} />
{!snapshot.isDragging && <AddWidgetControl />}
</div>
);
}}
</Draggable>
);
})
) : (
<Button
onClick={() =>
addDashboardItem.mutate({
index: 0,
dashboardItem: widgets.overview
})
}
>
<Typography variant="body2">Add</Typography>
</Button>
)}
{provided.placeholder}
</div>
);
}}
</Droppable>
</DragDropContext>
and the WidgetCard component that conditionally renders the widgets using lazy looks like this:
const WidgetCard = ({
item,
dragHandleProps
}: {
item: DashboardItemEntity,
dragHandleProps?: any
}) => {
{...}
const renderLoader = () => <p>Loading</p>;
const WidgetComponent = lazy(() => import(`../${item.component}`));
{...}
return (
{...}
<CardContent sx={{ marginTop: 0, paddingTop: 0 }}>
{/* {description} */}
<Box sx={{ marginLeft: 2 }}>
<Suspense fallback={renderLoader()}>
<WidgetComponent item={item} />
</Suspense>
</Box>
</CardContent>
{...}
);
};
I want to make the line underneath 'Search' and the arrow on the right white but I can't figure out how to do it for the life of me. I've tried using styled on the .MuiAutocomplete-root css class but it didn't work. I can't figure out which CSS class to apply the color to. If I inspect it, it says that the class is MuiInput-root which I also tried with styled and that didn't work either.
Thanks
My code (copy pasted from the docs with some minor adjustments):
function sleep(delay = 0) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}
export default function AutocompleteSearch() {
const [open, setOpen] = useState(false);
const [options, setOptions] = useState([]);
const loading = open && options.length === 0;
useEffect(() => {
let active = true;
if (!loading) {
return undefined;
}
(async () => {
await sleep(1e3); // For demo purposes.
if (active) {
//api call then setOptions
}
})();
return () => {
active = false;
};
}, [loading]);
useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);
return (
<Autocomplete
id="size-small-standard"
size="small"
sx={{
width: 300,
}}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
groupBy={(option) => option.type}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Search"
//makes label white
InputLabelProps={{
style: {color: '#fff'},
}}
InputProps={{
...params.InputProps,
//makes the selected option white when added to the box
sx: {color: '#fff'},
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={20}/> : null}
{params.InputProps.endAdornment}
</>
),
}}
/>
)}
/>
);
}
Add color to the following CSS classes.
.MuiSvgIcon-root {
color: white;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:before {
border-bottom-color: white !important;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:after {
border-bottom-color: white !important;
}
Play around with the code here
I used red color in my codesandbox example so that it can be visible on white screen
I have this problem:
I have to render a FlatList mapping Firestore documents and I do like this:
componentDidMount();
{
const cat = [];
var db = firebase.firestore();
const ristoDoc = db.collection("ristoranti").where("telefono", "==", "3296812820");
ristoDoc.get().then((snapshot) => {
snapshot.forEach((doc) => {
this.setState({
id: doc.id,
});
});
});
db.collection("ristoranti")
.doc(this.state.id)
.collection("categorie")
.onSnapshot((querysnapshot) => {
querysnapshot.forEach((doc) => {
const data = doc.data();
this.setState({
nome: data,
});
cat.push(data);
});
this.setState({
categorie: cat,
});
});
}
And my FlatList:
<
FlatList horizontal = {
true
}
pagingEnabled = {
true
}
style = {
{
width: '100%',
height: '22%'
}
}
contentContainerStyle = {
{
height: '90%',
width: 100
}
}
data = {
this.state.categorie
}
renderItem = {
(item) =>
{
<View>
> <Text key={item.id}> {item.nome} </Text>
<View>
<TouchableOpacity onPress = {
() => this.setState(
{
visibileProdottoAdd: true
})
}>
<Text> + </Text> </TouchableOpacity> </View> </View>
But I have always the same error of the image []
I try all the day and nothing was changed I done a little error at item.name that a have curly braces in original code
Update
<FlatList
horizontal={true}
pagingEnabled={true}
style={{ width: "100%", height: "22%" }}
contentContainerStyle={{ height: "90%", width: 100 }}
data={this.state.categorie}
key={({ item }) => {
item.id;
}}
renderItem={({ item }) => {
<View
style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
width: 200,
}}
>
<Text
key={item.id}
style={{
fontSize: 20,
color: "#C6C6C6",
marginBottom: 5,
width: "35%",
}}
>
{item.nome}
</Text>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center",
width: "60%",
}}
>
<TouchableOpacity
onPress={() =>
this.setState({ visibileProdottoAdd: true })
}
>
<Text style={{ fontSize: 20, color: "#66a3ff" }}>
+
</Text>
</TouchableOpacity>
</View>
</View>;
}}
></FlatList>
I edit my code in this version e nothing change, in componentdidmount function I try to test what was get from Firestore
componentDidMount() {
const cat = [];
var db = firebase.firestore();
const ristoDoc = db
.collection("ristoranti")
.where("telefono", "==", "3296812820");
ristoDoc.get().then((snapshot) => {
snapshot.forEach((doc) => {
this.setState({ id: doc.id });
});
});
db.collection("ristoranti")
.doc("qKEWUfZPsy2pu6IoFUio")
.collection("categorie")
.onSnapshot((querysnapshot) => {
querysnapshot.forEach((doc) => {
const data = doc.data();
this.setState({ nome: data });
cat.push(data);
cat.forEach(({i})=>{console.log(i.nome)})
});
this.setState({ categorie: cat });
});
The strange thing that it was an error on Expo Cli but in my Visual Studio console log i have my list of name.
You are doing a very simple mistake. I think Problem is in Render Item.
<FlatList
data={arr}
key={({ item }) => item}
onEndReached={({ index }) => handleLoadMore(index)}
renderItem={({item} ) => <RenderItem item={item} />}
/>
you are passing an item. you have to pass object {item}
Can't get 'selected' or 'hover colors to work for ListItem. For selected tried setting its classes like:
<ListItem selected button key="home" classes={{ selected: classes.listItemSelected }}>
<ListItemText primary="Hi"/>
</ListItem>
and then setting the style like:
const useStyles = makeStyles((theme) => ({
listItemSelected:{
backgroundColor: "#ff0000",
},
}));
But it doesn't do anything, the 'selected' is described in the ListItem component API here.
How do you get to set the color of both the selected and hover for ListItem?
Below is the portion of the default ListItem styles that deals with the background color:
export const styles = (theme) => ({
/* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
root: {
'&$focusVisible': {
backgroundColor: theme.palette.action.selected,
},
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
'&$disabled': {
opacity: 0.5,
},
},
/* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
focusVisible: {},
/* Styles applied to the inner `component` element if `button={true}`. */
button: {
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest,
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
/* Pseudo-class applied to the root element if `selected={true}`. */
selected: {},
});
The important thing to notice is that the selected styling is done via a combination of two classes (root and selected), so if you try to override it using a single class you will not have sufficient specificity.
Below is an example showing one way to override the selected and hover states:
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import List from "#material-ui/core/List";
import MuiListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import Divider from "#material-ui/core/Divider";
import InboxIcon from "#material-ui/icons/Inbox";
import DraftsIcon from "#material-ui/icons/Drafts";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
const ListItem = withStyles({
root: {
"&$selected": {
backgroundColor: "red",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&$selected:hover": {
backgroundColor: "purple",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&:hover": {
backgroundColor: "blue",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
}
},
selected: {}
})(MuiListItem);
export default function SelectedListItem() {
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
return (
<div className={classes.root}>
<List component="nav" aria-label="main mailbox folders">
<ListItem
button
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
<ListItem
button
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItem
button
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItem>
<ListItem
button
selected={selectedIndex === 3}
onClick={(event) => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItem>
</List>
</div>
);
}
Related answers:
How to overried the selected classes in menuItem in material ui REACTjs?
How to change the styles of ListItem element with the "onclick" event?
You can use the sx prop in MUI v5:
<List
sx={{
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
bgcolor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
bgcolor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
}}
>
Or styled to create a styled component that can be reused multiple times:
import MuiList from '#mui/material/List';
const List = styled(MuiList)({
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
backgroundColor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
backgroundColor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
});
Live Demo
I have created a form in react-native which looks like:
Here is my code:
const Login = (props) => {
const { phoneContainerStyles, loginButtonStyle } = styles;
return (
<View>
<Field id="country" name="country" type="select" mode="dropdown" label="Country:" component={FormInput}>
{
props.countries && props.countries.map(country => <Picker.Item key={country.code} label={country.name} value={country.code} />)
}
</Field>
<Field id="phone" name="phone" type="phone" label="Phone Number:" component={FormInput} />
<Button type="submit" title="Login" buttonStyle={loginButtonStyle} onPress={props.handleSubmit(onLogin)} />
</View>
);
}
const styles = {
loginButtonStyle: {
backgroundColor: '#fc4482'
}
}
Here is the FormInput:
const FormInput = (props) => {
const { touched, error } = props.meta || {};
const { labelStyles, errorStyles } = styles;
return (
<View>
<Text style={[labelStyles, { display: props.label ? 'flex' : 'none', color: `${(touched && error) ? 'red' : 'black'}` }]}>{props.label}</Text>
<View style={{ padding: props.inputWrapperPadding }}>
{returnInput(props)}
<View>
<Text style={errorStyles}>{touched ? (error ? error : '') : ''}</Text>
</View>
</View>
</View>
);
};
const returnInput = (props) => {
const { touched, error } = props.meta || {};
switch (props.type) {
case 'select':
.....
case 'phone':
return (
<View>
<TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
<TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
value={props.input.value} onChangeText={value => props.input.onChange(value)} />
</View>
);
default:
.....
}
};
const styles = {
labelStyles: {
paddingLeft: 16,
fontWeight: 'bold'
},
errorStyles: {
color: 'red',
marginLeft: 16,
marginRight: 16,
marginBottom: 8
},
pickerStyles: {
marginLeft: 16,
marginRight: 16
},
textBoxStyle: {
marginBottom: 4,
borderWidth: 1,
}
phoneSelStyle: {
width: 50
}
}
Now, I want the two TextInputs below Phone Number label in 1 line.
So, I added this style to View:
case 'select':
.......
case 'phone':
return (
<View style={styles.phoneContainerStyles}>
<TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
<TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
value={props.input.value} onChangeText={value => props.input.onChange(value)} />
</View>
);
default:
.......
Here is the style:
phoneContainerStyles: {
flex: 1,
flexDirection: 'row'
}
Now, If I run my app, then output looks like below:
I don't know why my textbox gets width = 0. Also, why button comes over the textboxes.
After following the answer by #Himanshu
Update your style like this:
//Child view component (<TextBox>) style use flex property
textBoxStyle: {
flex:2
borderWidth: 1,
}
phoneSelStyle: {
//width: 50 don't apply width instead use flex
flex:8
}
//Parent view style
phoneContainerStyles: {
flex: 1,
flexDirection: 'row'
}