How to increase the height of individual options in Semantic UI?

user_11232424 0
Viewed 436

Is it possible to change the height of the individual option in Semantic UI React? or Is there any way to override the CSS class. I can apply inline style on the drop-down component

 import React from 'react'
    import { Dropdown } from 'semantic-ui-react'
    import './currency-convertor.styles.css'
    
    const friendOptions = [
      {
        key: 'Jenny Hess',
        text: 'Jenny Hess',
        value: 'Jenny Hess',
        image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
      },
      {
        key: 'Elliot Fu',
        text: 'Elliot Fu',
        value: 'Elliot Fu',
     }
    ]
    
    const DropdownExampleSelection = () => (
      <Dropdown
       style={{width:'300px', height:'80px',fontSize:'20px'}}
       placeholder='Select Country'
        fluid
        search
        selection
        options={friendOptions}
      />
    )
    
    export default DropdownExampleSelection
semantic-ui reactjs css javascript
1 Answers

There are two ways to change or overwrite semantic-ui styles in react, one is use the !important param in your css module or modify the react index.css with the semantic-ui class name.

In your case to achieve this, you need to use dropdown with <Dropdown.Menu> and <Dropdown.Item>, for specifying the exact item to modify:

<Dropdown text='Select Country'> 
 <Dropdown.Menu> 
  <Dropdown.Item text='Jenny Hess' /> 
  <Dropdown.Item text='Elliot Fu' style={{width:'300px', height:'80px',fontSize:'20px'}} />
 </Dropdown.Menu>
</Dropdown>

Then you need to map each friendOptions with his own style if it is needed.

import React from 'react'
import { Dropdown } from 'semantic-ui-react'
import './currency-convertor.styles.css'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: '/images/avatar/small/jenny.jpg' },
    style: { width:'300px', height:'80px',fontSize:'20px'}
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
 }
]

const DropdownExampleSelection = () => (
  <Dropdown text='Select Country'>
   <Dropdown.Menu>
    {friendOptions.map(item=><Dropdown.Item text={item.text} style={item.style || {}} /> )}        
   </Dropdown.Menu>
 </Dropdown>
)

export default DropdownExampleSelection

https://react.semantic-ui.com/modules/dropdown/#types-dropdown

This should work, sorry for my English.

user_139173410
Related