I'm fairly new to ReactJS and am using styled components to display an image. The code I have in my App.js is <StyledImage src={mainimg} alt="hi"></StyledImage> which displays an image on the left side of the screen. My styling is
export const StyledImage = styled.img`
width: 80%;
`;
I've tried justify-content, alignitems... I'm not sure what exactly to type to get it aligned on the right side of its container. Any advice?
Use float: "right" as a style.
Ok so, you need to set the justify-content and align-item properties to the parent node of your image to move the child inside your parent. If you don't want to set any properties to the parent then use the position: absolute or position: fixed to your image.
Related
I'm new to React and wanted to ask what's the cleanest way to implement a background design like this. I want to know how you could change the background to blue and have the images overlap into the white area or the rings in the corners. So what is the best approach? And I don't want to use a background image
Background I want to implement
position: fixed;
background: "your image or some colors";
width: 100%;
height: 100vh;
Other contents should appear accordingly if you apply proper z-index
There are several options.
You can add !important behind the code that wnna be overwrite.
add z-index for the each element. note : the higher z-index number of the element, it will be place at the top.
in-line style. where you can add tag style={{ your style here}} within your element. example
<div style={{z-index : 10, backgroundImage : black}} > Text here </div>
manual CSS with tag backgroud-image.
I have a component that renders Tabs component from Material UI 5.0.0-beta.5
There is a case when I set this components display to none.
But, then I get this error -
Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.
I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).
Is there a way to fix this error or maybe a better way to do what I am trying to do?
You could try to use visibility: hidden instead
And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.
visibility: hidden;
width: 0;
height: 0;
And when you want to show it back:
visibility: visible;
width: 100%;
height: 100%;
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
I'm learning how to style React components and use npm to import libraries that i can use to do different things. I have imported react-shadow-text and tried to implement a simple h1 with text shadow. When attempting to style it, all of my styles work but when I center the text within the component, the shadow does not center along with the text. If i do not center the text and i resize the browser. the shadow stays with the text as you would expect but as soon as you apply justify-content, text-align, or any centering property to the component, the text will center itself but the shadow remains to the left and the shadow does not stay in the center with the text and instead remains to the left during resizing, making itself further away from the text.
I have tried using flexbox centering and i've also tried without flex. I've also tried to style the component with different styling techniques such as css modules and inline styles. I'm sure it's something simple, but i can't really find anything on the issues specifically regarding this particular library without using native.
import React, { Component } from 'react';
import ShadowText from 'react-shadow-text';
import styles from '../Name.css'; //imported stylesheet working
import styled from 'styled-components';
//import styles from '../Name.css';
class Name extends Component {
render() {
return(
<ShadowText className="name" theme={{
shadowTextColor: 'Black',
shadowTextShadowColor: 'Black',
shadowTextShadowBlur: '6px',
shadowTextXTranslate: '0px',
shadowTextYTranslate: '15px',
textShadowOffset: '0px', //tried messing with this
shadowTextTransitionDuration: '0.4s',
shadowTextTransitionTiming: 'ease-in-out',
}}>
Larry Young
</ShadowText>
);
}
}
export default Name;
And CSS
.name {
font-size: 2.5em;
font-family: 'Cinzel';
width: 100vw;
height: 20vh;
text-align: center; //problem child. without this, text stays to the left
//but shadow attaches itself to text. When this is
//added, or justify content is added, text detaches
//from shadow effect. Positioning issue maybe?
}
I've tried using anchorShadow prop built in to the npm library and setting it to true and it just flips the text and the shadow and does the same thing, but the shadow stays in place and the text moves...I've also tried CSS Modules css.js as well and inline styles. I guess I could try using raw text-shadow css but it kind of defeats the purpose in learning this particular library. I assume lack of experience with React is what's biting me. Thanks everyone.
I have noticed that when the react-text-shadow library adds the shadow, it does so in a seperate div that is absolute positioned. If I take away the positioning in dev tools, the shadow leaps to the center. So i tried isolating that class in index.css in the create-react app environment and changed the position value. When doing so, it worked, until I tried to edit the shadow offset to line it up more precisely. As soon as I changed the properties to control shadowTranslateXorY and reload, it generates a new class for the shadow, which negates the positioning change I made in the master index.css file. For now, I will just use CSS text-shadow. Putting text-shadow into the css file for the component, importing it into the component, and referencing to it with className is working fine. Hopefully someone else knows a little bit more about this particular library. I can't seem to find much documentation about it, aside from what is on the NPM page when you install.
I want to render a button outside of the component's boundary. How can I do that? I have the styles looks like as shown below. The negative position works but the button get hidden by a sibling component. In the below image, the blue color is a sibling component. You can see the round button positioned in negative is hidden by the sibling component. Why? how can make it visible? I tried zIndex, but looks like it works only within the same component.
If the above question is not clear, let's say A, B, C are three components. A is the parent and, B and C are child components. I want to render a button from B and it must overlay on top of B. I don't want to render the button from component A. Any help appreciated.
Btn: {
position: 'absolute',
zIndex: 1000000,
width: 50,
height: 50,
top: -27,
left: 20,
backgroundColor: 'red'
},
The part where you render button, place that on the bottommost part of the render function where you are rendering the button and the siblings. Then with the absolute positioning, it would bet render last, and hence at the top. You wouldn't need z-index in this case. I hope I understood your problem correctly.
If it's android app use elevation property instead of z-index on B component