I built a Rich Text Editor for my react application using Draft.js.
I want to apply the default Material UI TextField styling to this component that I have developed. How can I achieve this?
<>
<Box
onClick={() => {
editorRef.current!.focus();
}}
sx={} // What should I add here to get default MUI TextField styles (outlined variant)
>
<Editor
editorKey={`content-text-field-${editorKey}`}
editorState={editorState}
onChange={onChange}
plugins={editorPlugins}
ref={editorRef}
/>
<TagSuggestions suggestionsComponent={suggestionsComponent} />
</Box>
<TextFieldRoot variant="outlined" />
</>
Related
Well, I made an autocomplete using the code below and tried to display its icon after selecting each item, but it didn't work!
import { useState } from 'react'
import { TextField,InputAdornment ,Autocomplete,Box} from '#mui/material';
import v1 from './v1.svg';
import v3 from './v2.svg';
import v4 from './v3.svg';
import v4 from './v4.svg';
function App() {
const [useicon ,setUseicon]=useState(v1);
const options=[
{'label':"تتر","icon":v1},
{'label':"بایننس",'icon':v2},
{'label':"بی اس دی",'icon':v3},
{'label':"دای",'icon':v4},
]
return (
<div>
<Autocomplete
options={options}
getOptionLabel={(option) => option.label}
onChange={(e,value)=>{setUseicon(value['icon'])}}
sx={{width:"300px"}}
renderOption={(props, option) => (
<Box component="li" {...props}>
<img src={option.icon} style={{width:"50px",height:"50px"}} alt={option.label} />
{option.label}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
inputProps={{
...params.inputProps,
startAdornment: <InputAdornment position='end'>
<img src={useicon} />
</InputAdornment> ,
}}
/>
)}
/>
</div>
)
}
export default App;
some notes:
1-All the imports were correct and there is no problem
2-In the same way, the icon is shown in the TextField Component.
3-If there is a typo, know that it was in this post and not in the program itself
Please help because it is very important for me.
Replace inputProps with InputProps.
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position='end'>
<img src={useicon} />
</InputAdornment>
),
}}
inputProps is the attributes You apply to the input Dom element, but the InputProps is the properties that You assign to the MUI Input element.
More data Here.
I'm designing a react-admin table, and I want to determine a row's background color by the "active" source of the row - if it's true I want the row background color to be green, otherwise I want it to be red.
I tried material ui's "makeStyles" with no success (all of this stuff is new to me).
This is my table:
const myTable = (props) => {
return (
<List {...props} pagination={<PostPagination />}>
<Datagrid>
<NumberField source="id" />
<TextField source="name" />
<TextField source="category" />
<TextField source="platform" />
<NumberField source="major" />
<NumberField source="minor" />
<BooleanField source="active" label="active"/>
<DateField source="audit" />
<EditButton basePath="versions" />
<DeleteButton basePath="versions" />
</Datagrid>
</List>
)
}
Thank you very much for any help!
Good afternoon, i didn't really understand that you have strings here, but there are many different options for example:
<MyRow style={{background: (isActive ? 'red' : 'green')} />
<MyRow className={isActive ? classes.activeRow : null />
In the first variant, you do not need to do anything with the styles, and in the second you will have to create a style for example through makeStyles.
const useStyles = makeStyles((theme) => ({
activeRow:{
backgroundColor: theme.palette.primary.main
}
}));
Below is the code which uses an external library called material ui and implements a search box with autocomplete. when a value is selected a input tag gets created and has value:"selected value", how would i access the value to be able to do something with it.
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
class ContractsList extends React.Component {
render() {
const contracts = this.props.contracts;
return (
<div>
<div className="searchbar">
<h1>All Aboard</h1>
</div>
<div className="search-bar">
<Autocomplete
id="search-bar-id"
disableClearable
options={contracts.map(contract => contract.name)}
renderInput={params => (
<TextField
{...params}
label="Search contract"
margin="normal"
variant="outlined"
InputProps={{ ...params.InputProps, type: "search" }}
/>
)}
/>{" "}
</div>
</div>
);
}
}
export default ContractsList;
im trying to get the selected value from the input field but its not working
The onChange callback is being called once you change the value of the autocomplete (change of value is basically once you select/remove items from your list).
onChange={(ev, value) => {
console.log(value);
}}
Here is a working example as part of the autocomplete:
<Autocomplete
onChange={(ev, value) => {
console.log(value);
}}
id="combo-box-demo"
options={autoCompleteItems}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
You can see a codesandbox here.
I'm struggling to override the default padding of the Select component to match the size of my other text fields. I understand that I need to modify nested components but have been unable to find a working solution.
<div className='wifi-chooser-column'>
<TextField
style={{margin: '6px'}}
label='SSID'
variant='outlined'
size='small'
/>
<Select
style={{margin: '6px', padding: '0px'}}
variant='outlined'
value={this.state.security}
onChange={(event) => this.setState({security: event.target.value})}
classes={{
select: {
padding: '10.5px 14px'
}
}}
>
<MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
<MenuItem value='WEP'>WEP</MenuItem>
<MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField
style={{margin: '6px'}}
label='Username'
variant='outlined'
size='small'
/>
<TextField
style={{margin: '6px'}}
label='Password'
variant='outlined'
size='small'
/>
Layout issue
According to the doc, there are several ways that we can override the material UI component styles.
If we want to override the padding of the Select components differently and occasionaly, or if this process would not be repeated in the entire project, we can simply use Overriding styles with classes approach. In this way, first we need to create our desired padding for Select component by makeStyles as below:
const useStyles = makeStyles((theme) => ({
rootFirstSelect: {
padding: "4px 0px"
},
rootSecondSelect: {
padding: "10px 80px"
}
}));
and then assign it to the classes prop of the component, by modifying the root element:
const classes = useStyles();
//Other part of the code
return (
//Other part of the code
<Select
classes={{ root: classes.rootFirstSelect }}
//other props
>
//Other part of the code
)
working sandbox example for this method
If we want to override the padding of the Select component for the whole project, Global theme variation would prevent repetition. In this way, we should create a theme by createMuiTheme, as below, and apply our desired changes there:
const theme = createMuiTheme({
overrides: {
MuiSelect: {
select: {
padding: "4px 0px 10px 130px !important"
}
}
}
});
then pass this theme as a prop to the ThemeProvider component which surround the whole project:
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>
working example in sandbox
I found an alternative way in the docs, that's easier to use for me: instead of using Select component, I use TextField with "select" props
cf: https://material-ui.com/components/text-fields/#select
<TextField
id="standard-select-currency"
select
label="Select"
value={currency}
onChange={handleChange}
helperText="Please select your currency"
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
Which allows you to access TextField props such as margin="none", margin="dense"
I[m trying to build, using semantic-ui-react, a menu like the example on the Semantic UI documentation, but I'm having problems on the popup width.
Here is my code:
import React, { Component } from 'react';
import { Menu, Icon, Dropdown, Popup, Grid, List } from 'semantic-ui-react';
import menulogo from '../../images/logo.svg';
class AppMenu extends Component {
render() {
return (
<div>
<Menu>
<Menu.Item>
<img alt='Logo' src={menulogo}/>
<strong color='blue'>Logo</strong>
</Menu.Item>
<Menu.Item>
<Icon name='browser' color='blue'/>
Menu
<Popup
trigger={<Icon name='dropdown'/>}
position='bottom center'
flowing
hoverable
>
<Grid
columns={3}
centered
divided
relaxed
>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 1</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
<Grid.Column textAlign='center'>
<List relaxed link>
<List.Header as='h4'>Group 2</List.Header>
<List.Item as='a'>Option 1</List.Item>
<List.Item as='a' >Option 2</List.Item>
<List.Item as='a' >Option 3</List.Item>
<List.Item as='a' >Option 4</List.Item>
</List>
</Grid.Column>
</Grid>
</Popup>
</Menu.Item>
</Menu>
</div>
);
}
}
export default AppMenu;
This is the result I´m getting:
I expected the popup to fit the text nicely. Seens that the columns are too small in width to keep all text.
Help appreciated.
The problem here is that the Grid component in semantic-ui is responsive. It takes on the size of it's parent if no width is defined. This is in the styles and not specific to semantic-ui-react. If you want your grid to take up more space horizontally, you can set a style={{width: '300px'}} on your Grid component and this will give you the space you want.
Add style={{width: '300px'}} on your Grid component.
I'd recommend doing a couple additional things here.
If you are insistent on using a Popup for this menu, you'll probably want to add the position='bottom left' prop to it.
Use the entire Menu.Item as the Popup component's trigger instead.
These two changes will give you this:
You'll probably be better off using a Dropdown component on this Menu instead, but I will keep the scope of my answer based on the initial question.
A codesandbox example is included showing all three of these changes in working order: https://codesandbox.io/s/n39o5y344p