score:1
try using the break word
css property. read more here
<container maxwidth="md">
<box sx={{ mt: 3, border:1}}>
<box style={{width:'100%}}>
{hassubmitted ?
<div style={{width:'100%}}>
<alert sx={{mt:3}} severity="success" style={{wordwrap:'break-word', width:'100%}}>
{receiveddata}
</alert>
</div>
: null}
</box>
</box>
</container>
score:1
it's not recommended to use style
prop, in order to customize the component alert
use global class name or styleoverrides property, in your example i used global class name:
.muialert-message {
min-width: 0;
word-wrap: break-word;
}
check this: https://mui.com/api/alert/#css
Source: stackoverflow.com
Related Query
- Material UI - Text goes outside the Container/Box?
- How to change the text color of the selected row in material ui table
- Material UI | How to change the font colour of a disabled input text field?
- Make child of Material UI Grid item stretch to fit the remaining height of the parent container
- Add text inside the Doughnut chart of the React-Chartjs-2 box to react
- Material UI - Replicating the "required" text field error message
- Moving the chips/tags outside Autocomplete box in MUI
- clear the material UI text field Value in react
- Add text inside the switch using material ui
- How to fix placeholder text within the input in material ui text field
- Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?
- Draft.js (react-draft-wysiwyg): text update from the outside of the Editor component does not work
- react - flex item outside the flex container
- Div container with text on the left side and overflow image on the right
- How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?
- Place text on Box Component of Material UI
- How would I delete text in a box upon the user clicking on it?
- How to add text based on click which is outside the Editor component , to the Editor
- How to clear the text field in formsy material ui React
- Material UI - Align icon to center with the Typography text
- How do you wrap text to the next line in a material UI select/menu item component? (CSS issue)
- How do I set the text color of primary raised buttons for React Material UI?
- I want to select the text inside input box by clicking on a button in react js but my code doesn't work
- Material UI : Place the avatar and text next to each other in the first column of the table
- How do I show the text longer than the textfield width in the material ui?
- How to customize text colors in the material ui in v 1.0.0
- Material UI Autocomplete - How do I add the same icon + text to the Textfield after I have selected
- How to put the icon inside the React Material Ui text field?
- undefined error for the text box using usereducer hooks
- Text not aligning vertically at the center of select dropdown in material UI core
More Query from same tag
- Transform function to useCallback
- Flux: return values from AJAX to the component
- React - Using state in component by useContext
- Material-ui List - Module not found: 'react'
- React: How to Pass State on Each Mapped Array Items?
- Babel/Webpack configuration for ES6 with BrowserSync (React-hot-loader)
- In reactJS, how to copy text to clipboard?
- How to tackle No QueryClient set, use QueryClientProvider to set one in React Query v3
- Loop through array and populate matrix - JS
- Move a square using the coordinate system in reactjs
- How to deal with state changes in functions with Jest and Enzyme
- How to return dynamic type depend on the parameter type in function
- memoizing lodash isEqual or comparing prop objects
- Understanding props of a wrapped component
- children component value reset when reload page in react
- React Firebase Cart Add Items Cart Reducer not working
- Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value
- Functions inside componentDidMount are undefined
- Pause audio play in React after exactly 1 second
- How to enable webpack Content Security Policy in React?
- React.js - Both images disappear onClick - how do I make only 1 disappear at
- ReactJS: Trigger event from child in parent component
- How to Iterate Group of Data and Return as List
- How to re-render the same component after deleting using react and redux?
- How to pass a styled component instead of string message to formik's thanks response
- Nothing was returned from render at promise return
- CSS style is not applying to button in React component
- Why's there discrepancies between file uploading via Postman and via the browser?
- How to test a React component with RouteComponentProps?
- Horizontal align two react elements