Как сделать CSS в JavaScript Object - PullRequest
Новая
       16

Как сделать CSS в JavaScript Object

2 голосов
/ 07 марта 2019

Я новичок в JavaScript.У меня нет особых знаний, связанных с JavaScript Object.На самом деле я хочу конвертировать CSS свойства в JavaScript Object.Я кодирую для одного свойства CSS, которая работает нормально, но я сталкиваюсь с некоторой логической проблемой.Я дам вам код, я хочу преобразовать эти два свойства в объект JavaScript.

Реагирующий компонент 

<div className="left-menus">
      {menus.map(item => {
          return (
            <Link to={item.name} name={item.name} key={item.name}
              className={this.state.activeMenu === item.name ? 'menu active' : 'menu' }
              onClick={() => this.setState({ activeMenu: item.name })}
              >
              <Icon name={item.icon} size="large"/>
              <span>{item.name}</span>
            </Link>
          )
      })}
    </div>

Объект JavaScript 

leftMenu : {
    position: 'fixed',
    width: '200px',
    paddingRight:' 0 !important',
    backgrounColor: '#fff',
    height: '100%',
    marginTop: '20px',
    top: '47px',
    fontSize: '12px !important',
    borderRight: '2px solid #e8e8ec'
}

App.CSS 

         .left-menus {
          position: fixed;
          width: 200px;
          padding-right: 0 !important;
          background-color: #fff;
          height: 100%;
          margin-top: 20px;
          top: 47px;
          font-size: 12px !important;
          border-right: 2px solid #e8e8ec; }
          .left-menus .menu {
            color: #4a4a4a;
            width: 100%;
            display: block;
            cursor: pointer;
            text-transform: capitalize !important;
            padding: 15px 10px 15px 18px; 
          }

Я создал объект для свойства css с именем left-menus, но у меня проблема с созданием логики для вторых свойств, потому что вторые свойства реализуют некоторые значения свойства Ist.Кто-то Пожалуйста, помогите мне, как сделать эту задачу.Спасибо

Ответы [ 3 ]

0 голосов
/ 07 марта 2019

Попробуйте https://www.styled -components.com / Вы можете написать что-то вроде, это только js: 

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>
  </div>
)
0 голосов
/ 07 марта 2019

Я не могу гарантировать, что это будет работать как есть, так как я не знаю, что такое Link и Icon, но это будет выглядеть примерно так: 

<div className="left-menus" style={{
  position: 'fixed',
  width: '200px',
  paddingRight: ' 0 !important',
  backgrounColor: '#fff',
  height: '100%',
  marginTop: '20px',
  top: '47px',
  fontSize: '12px !important',
  borderRight: '2px solid #e8e8ec'
}}>
  {menus.map(item => {
    return (
      <Link to={item.name} name={item.name} key={item.name}
        className={this.state.activeMenu === item.name ? 'menu active' : 'menu'}
        onClick={() => this.setState({ activeMenu: item.name })}
        style={{
         color: '#4a4a4a',
         width: '100%',
         display: 'block',
         cursor: 'pointer',
         textTransform: 'capitalize !important',
         padding: '15px 10px 15px 18px',
      }}
>
        <Icon name={item.icon} size="large" />
        <span>{item.name}</span>
      </Link>
    )
  })}
</div>
0 голосов
/ 07 марта 2019

Кажется, все в порядке, кроме объявления переменных.Это то, что вы хотели бы достичь?

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

Надеюсь, это поможет:)

...