I have an SVG file that I import in my React web page. The problem is the SVG displayed has some of its colors wrong.
As you can see on the web page, there are 3 SVG. 2 of them are displayed with wrong colors. But the first one has original colors. Although the 3 SVG are imported and used exactly the same way.
In MyPage.jsx, I import them
import Hanshake from '../images/handshake.svg';
import Logistics from '../images/logistics.svg';
import Designer from '../images/designer.svg';
Then simply use it like this:
<Col xs={24} md={8} className='about_illustration_text'>
<Hanshake />
Some text
</Col>
<Col xs={24} md={8} className='about_illustration_text'>
<Logistics />
Some text
</Col>
<Col xs={24} md={8} className='about_illustration_text'>
<Designer />
Some text
</Col>
I didn't find any CSS conflicting.
What's wrong with those SVG ?
First SVG codepen
2nd SVG codepen
3rd SVG codepen
There are conflicting CSS rules. Each SVG uses <linearGradient> definitions (look inside the <defs> sections), and they use the same Ids.
These Gradients get referenced by style attributes like this:
style="fill:url(#_Linear11);"
After inserting all SVG content into one page, there are multiple <linearGradient> elements with the same id as part of the same DOM. Ids must be unique throughout a page, or references will overwrite each other.
You are overwriting your fill styles with the fill:url(#_Linear1) rule (the #_Linear1 part). If you put 2 of that SVG in the same CodePen, you will see how they change its fill since they are conflicting. Things gets odd with 3 in the same file.
Change your url(#_Linear1) to a rgb plain color/background or use a unique identifier for each background element.
Related
I'm just starting to learn Material-ui,but when I used Grid, I got an error. This is my code.
My requirement is to put the header buttons on the same line, and if I zoom out it will appear as a scroll bar
<Grid container spacing={1}>
<Grid item xs={12} md={7}>
<UserList></UserList>
</Grid>
</Grid>
but i just get this:enter image description here
and when i change my code :
<Grid container xs={12} md={7} spacing={1}>
<UserList></UserList>
</Grid>
i can get what I wanted：
enter image description here
I know the prop md of Grid must be used on item.
But how do I write to get the results I want right?
I hope someone can help me！ thanks!
In the first case, you are allotting 7 columns for the grid item (i.e. your <UserList /> component). Now, the header part which includes the search icon etc. is wrapping up in those 7 columns, I guess that's the way the header part is designed (may be with flex display), but the lower part i.e. the table has a fixed width and that's why it is overflowing and resulting in a horizontal scroll. It is behaving as expected.
In the second case, the way you have written the code does not make any sense about using grid layout, it is giving you what you finally need because it is like not using any grid layout at all, <UserList /> is taking the whole width.
Please think about where you really want to use grid. Probably you don't actually want to put the whole component <UserList /> as a grid item. Still, if you want to use only one item in the grid, you probably want to give md={12} to it.
I am playing around with React Components and I came across this website that goes over different ways to use Form Control with bootstrap styling. I want to create a text area that dynamically changes in size when user presses enter, but with the following exercise a scroll bar gets added. I could just change the number of rows, but is there a way to make the text field change in size every-time a user creates a new line
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={1} />
</Form.Group>
React bootstrap examples
Thank you for your time and answer
This package would have the behavior you are looking for: react-textarea-autosize
For making it bootstrap-like, I'd suggest adding a bootstrap css className to this component (more info):
<TextareaAutosize className="form-control" />
I am creating a table with data. Want pagination like this attached image in the footer.
Left-hand side I want the numbers and right-hand side Results per page.
Probably you have to use the combination of Pagination and Table pagination. And hide the unused panels with the CSS.
<div className={classes.root}>
<Pagination count={10} variant="outlined" shape="rounded" />
<TablePagination
component="div"
count={100}
page={page}
onChangePage={handleChangePage}
rowsPerPage={rowsPerPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>;
I have created a sample codesandbox (This is just a workaround) - https://codesandbox.io/s/material-demo-forked-wmm4z?file=/demo.tsx:891-1225
Let me know if you need more help.
As #Tejogol mentioned you can use the Material UI table example pagination and change it.
You can store the current page number in a state variable and add a different style to the corresponding navigation field. The style seems like a simple border with a small border radius (1-3px).
For the results per page you can use React spacers. Don't forget to update the current page number when changing the results per page.
I am rendering an icon in my React Native app, and have to specify the checked/unchecked icon type. I am reading the list of FontAwesome icons here: https://fontawesome.com/icons?d=gallery&q=circle
There are many different circle icons called "circle". When I specify "circle" as the icon type in my app, it uses the filled circle by default, but I want to use the outline circle. Does anyone know how to do this? Specifically, I am rendering a <CheckBox> component and specifying the uncheckedType field.
I’d recommend using react-native-vector-icons which includes FontAwesome. Check out the directory of all the icon packs here.
That all have unique names, so the code would look something like this:
import Icon from 'react-native-vector-icons/FontAwesome';
const checked = <Icon name="circle" size={30} color="#900" />;
const unchecked = <Icon name=“circle-o” size={30} color={#900} />;
This will make it really easy to quickly add all kinds of icons into your app!
I am using react js to develop my web application and I am using React material design for the UI. Below is the url which I am referring.
https://material-ui-next.com/
I am trying to achieve something like this
I am using the tabs but I can't get a two line text as like the image I shared. either I can use image and label or if the label is too big then it goes in multi line. How can I achieve two line text as like the image
In order to make multiline text, you can insert the HTML < pre > tag, from which the text formatting is retained. Then it remains to inherit the style of the text.
<Typography>
<pre style={{ fontFamily: 'inherit' }}>
{content}
</pre>
</Typography>
It's an old question, but I see nobody has answered it yet.
In order to get multi line and multi styles for your tab label, you need to place your labels and values in two different items. (make sure you wrap them in a div first)
The preferred way in MUI #1.0.0 is to use the <Typography /> tag.
Check out the typography docs for all the variants.
So it would look something like this:
<Tab
value={this.state.value}
label={
<div>
<Typography variant="caption">
Following
</Typography>
<Typography variant="title">
58
</Typography>
</div>
}
/>
However since all your tabs need that, you should probably create a function to take care of that.
I have created a sandbox based on the MUI example provided here: https://codesandbox.io/s/vw6107rv3