We Keep Coding

Align <a> to right side of div

How would I align the <a> element, containing the Button with the string Push Me to the right side of the <div> (<Paper>)?
https://codesandbox.io/s/eager-noyce-j356qe
The application is in demo.tsx file.
Note: I cannot set the position of the button to absolute and then position it right: 0px because I need to adjust the height of the <div> (<Paper>) according to its content, which includes the height of the <Button>.

Based on your demo i'd suggest you'd wrap the text in a <div> and give display: flex property for your <Paper>. Then you could use flex-gow: 2 on that div
<Paper style={{ display: 'flex' }}>
<div style={{ flexGrow: '2' }}>
<p>This is some text </p>
<p>This is even more text </p>
</div>
<Link
component="button"
variant="body2"
onClick={() => {
console.info("I'm a button.");
}}
>
<Button
variant='contained'>
Push Me
</Button>
</Link>
</Paper>
Here's the forked Codesandbox
More about flexbox if you're not familiar with it

Can't change color of Card Title text in React Native Paper

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" }}

How to hide overflow text content in react

I try to implement the functionality to hide text that overflow grid component.
But still the text is not hidden. So I want to know how to implement this functionality.
Front : React
css framework : semantic-ui-react
Here is the target code:
render() {
return (
<Container style={{marginTop: '3em'}} text>
<Grid columns={1} divided="vertically">
<Grid.Row>
{(this.state.articleDatas || []).map(function(articleData, i) {
return (
<Grid.Column>
<Segment>
<Header as="h1">{articleData.title}</Header>
<p style={{textOverflow: 'clip'}}>
{articleData.content.length > 100
? articleData.content.substring(0, 97) + '...'
: articleData.content}
</p>
</Segment>
</Grid.Column>
);
})}
</Grid.Row>
</Grid>
</Container>
);
}
This is the current status on the screen.
https://s19.aconvert.com/convert/p3r68-cdx67/gpext-9x16c.gif
I want to hide overflowed text automatically to widen or shorten component like below picture.
The full source code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/List.tsx
I expect the overflowed text to be hidden.
But the actual is not. So I want to know how to hide it.

You can try word-break property in CSS. Consider the element with class myElement:
.myElement {
word-break: break-all;
}

style={{overflow: "hidden"}}

React-responsive-modal: Change background-color when modal is open

I use react-responsive-modal
to open some modals within my react app. When i open the modal, there is an overlay effect that darkens the background behind the modal. Is there any way to darken the background for 100% or set any color for the background so i cant see the stuff which was there before the modal was opened until i close the modal again?
I created a new component for the modal ModalComponent within my MainComponent, which gets rendered when i click a button:
ModalComponent:
render() {
return (
<div className="childDiv">
<Modal
open={open}
onClose={this.onCloseModal}
center
classNames={{
transitionEnter: styles.transitionEnter,
transitionEnterActive: styles.transitionEnterActive,
transitionExit: styles.transitionExitActive,
transitionExitActive: styles.transitionExitActive
}}
animationDuration={1000}
>
...
MainComponent:
<div>
<div className="outter" onClick={this.openModal.bind(this)}>
//Open Modal when clicking on this div
<p className="arrival">Ankunft am Ziel: ~ {this.props.arrival} Uhr</p>
<p className="price">max. {this.props.price} €</p>
{this.state.open && (
<BookingModalNew
open={this.state.open}
triggerCloseModal={this.closeModal.bind(this)}
destination={this.props.destination}
arrival={this.props.arrival}
price={this.props.price}
/>
)}
//Whole Stuff should not be visible while Modal is opened

Just assign an object with your styles for the overlay to a variable say, bg inside your render and then just use the styles prop to reference that object in your Modal like this:
render() {
const bg = {
overlay: {
background: "#FFFF00"
}
};
return (
<div className="childDiv">
<Modal open={open} onClose={this.onCloseModal} center styles={bg} }}>
<p>Your Modal Content</p>
</Modal>
</div>
)
}
But wait. Why create an extra object when we can just write the styles directly instead like this:
<Modal open={open} onClose={this.onCloseModal} center styles={background: "#FFFF00"}>
<p>Your Modal Content</p>
</Modal>
The above approach won't work even though it looks like it's doing the same thing as my code and that is because you can't directly specify styles inline on react-responsive-modal. You need to place the styles in an object first and then reference the styles prop to that object.
You can however create the object within the styles prop itself by doing this:
<Modal open={open} onClose={this.onCloseModal} center styles={{ overlay: { background: "#FFFF00" } }}>
<p>Your Modal Content</p>
</Modal>
But it is recommended that you define objects outside and then reference it inside the styles prop as shown above.

You can change the CSS of overlay by styles props of Modal
<Modal animationDuration={1000} styles={{ modal: {}, overlay: { background: "#ccc" } }} closeIconSize={16} open={modalOpen} onClose={this.onCloseModal} center >
Your Code Here...
</Modal>
Please see the full documentation of react-responsive-modal here

You need to target and overwrite the overlay class, e.g.
<Modal style={{ overlay: { background: 'black' } }} />
Another way of doing it is shown in the docs, e.g.
<Modal classNames={{ overlay: { background: 'black' } }} />

React-dropzone style drop area

I am new to reactjs,
trying to create a component that uses react-dropzone.
I was wondering, what is the best way to override the default setting to style the drop area.
So far I have inline style, but it looks to me that I am not doing the 'right' thing.
<Row>
<Jumbotron className="text-center">
<h4>Create a manual call</h4>
<Dropzone
className=""
multiple={false}
onDrop={this.onDrop}
style={{"width" : "100%", "height" : "20%", "border" : "1px solid black"}}>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>
</Jumbotron>
</Row>
Any help or better suggestion?
Thank you!

What you are doing is totally fine. If you would prefer you can write your styling in a .css file that you add to your project. Give the component a className and import the css somewhere in your project.
<Dropzone
className="dropzone"
multiple={false}
onDrop={this.onDrop}>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>
/* styles.css */
.dropzone {
width : 100%;
height : 20%;
border : 1px solid black;
}
There are more involved libraries to do css-in-js like styled-components, but there is no 100% correct solution.

You can create a style object like this
const dropzoneStyle = {
width : "100%",
height : "20%",
border : "1px solid black"
};
Use the variable in jsx like this
<Dropzone
className=""
multiple={false}
onDrop={this.onDrop}
style={dropzoneStyle}
>
<div>
Try dropping some files here, or click to select files to upload.
</div>
</Dropzone>