Consider this code snippet:
<Typography className={classes.welcomeMessage} variant="h1">
A <span className={classes.redText}>smart nation </span> approach
to <span className={classes.redText}>safety.</span>
</Typography>
Essentially I want to have one sentence, but some of the words in that sentence are of red colour. redText and welcomeMessage contain the same properties except for the fact that the colour is different. However, the text comes up like this:
Asmart nationapproach tosafety.
I presume the span component is messing with the spacing. Is there an easy fix or ideal way of dealing with this?
I tried it by the style and it's working perfectly, there should be some problem with your classes of styles, try this, it will work perfectly.
<Typography style={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>
My suggestion is, on Typography you can try to use sx, so the code will like this:
<Typography sx={{ color: "blue" }} variant="h1">
A <span style={{ color: "red" }}>smart nation </span> approach to{" "}
<span style={{ color: "red" }}>safety.</span>
</Typography>
Related
I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help
You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox
I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring#8.0.20 and it works
Good morning,
I am in love with MUI, there is so much one can do. However, after using it extensively, I have noticed that a MUI Divider does not show up when it is the child of a Container or Paper component. I can't find anything as to why this is the case, so it is probably my implementation. Could someone check it out and see why it isn't appearing?
Everything is imported, the Popover works fine.
Thank you!
navBarPopover: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
>
<Container className={clsx(classes.navBarPopover)}>
<Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
Login
</Button>
<Divider />
<Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
FAQs
</Button>
</Container>
</Popover>
I agree, Material-UI is really awesome.
In this issue, you're giving display:'flex' to the parent container. By giving flex, the child elements take the minimum possible width as flex-shrink is there on child elements by default.
So, here the Divider is there but its width is 0. Provide width to 100%.
<Divider style={{width:'100%'}} />
Check the demo here:- https://codesandbox.io/s/happy-euler-2ycv4
I'm just getting started with React Native and using Paper for UI elements. I'm using a card layout for my current screen:
{cardData.map((card, index) => {
return(
<Card key={index}>
<Card.Title title="Card Title" subtitle="Subtitle" style={styles.cardHeader} />
<Card.Content>
<Paragraph>{card.content}</Paragraph>
</Card.Content>
<Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
<Card.Actions>
<Button>Cancel</Button>
<Button>Ok</Button>
</Card.Actions>
</Card>
)
})}
I'm trying to change the color of the title section to green, an the color of the text to white. So I have the following style:
const styles = StyleSheet.create({
cardHeader: {
backgroundColor: '#00bc8c',
color: '#ffffff'
}
});
Strangely the background color changes as expected, but the text color remains black. Could anyone suggest why this may be the case?
You can use titleStyle for styling title react-native-paper
As suggested by Nooruddin, but with a code sample:
titleStyle={{ color: "#f00" }}
I have a problem with MuiCardHeader
<CardHeader
disableTypography
avatar={renderAvatar()}
action={
<IconButton onClick={toggleMenu}>
<img src={MoreIcon} alt=""/>
</IconButton>
}
title={
<Typography noWrap variant="subtitle1">
{data.name}
</Typography>
}
subheader={
<Typography variant="subtitle2" color="textSecondary">
{data.children.items.length} items
</Typography>
}
/>
For some reason too long title or subtitle slide the menu button to the right outside the card.
How can I prevent it?
Result I need
Here is code sandbox
https://codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js
UPD: Solution
Add the following code
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
to .MuiCardHeader-content class
Thanks to everyone for help!
You need to restrict the parent with text-overflow: ellipsis, overflow: hidden and white-space: nowrap
So in your case you just have to add .MuiTypography-noWrap to the parent .MuiCardHeader-content
As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?
react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL
There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.
You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.
For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>
This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU
<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>